1 00:00:00,720 --> 00:00:03,390 So let's talk about cascading style sheets for a little while. 2 00:00:03,420 --> 00:00:08,630 So this is my reservationist e-mail page, which were eventually going to cut up into a Goldwing template. 3 00:00:09,900 --> 00:00:14,780 If I look at the HTML for that page, I have all of these imports at the top. 4 00:00:14,790 --> 00:00:19,350 So a link to a style sheet and then a style sheet on a remote server somewhere. 5 00:00:19,350 --> 00:00:24,480 So if I copy that URL and open a new tab 6 00:00:27,150 --> 00:00:32,580 and go there, you'll see that this is really hard to read because it's not formatted nicely. 7 00:00:32,580 --> 00:00:35,440 But if I take the out of there, we can actually see what it looks like. 8 00:00:36,060 --> 00:00:36,750 This is just. 9 00:00:37,470 --> 00:00:41,930 So it's a bunch of directives that tell the browser how to to the page. 10 00:00:41,940 --> 00:00:46,590 So, for example, if we look at this one input of type equals radio. 11 00:00:46,590 --> 00:00:49,740 So that's just an input on a former radio button on a form. 12 00:00:50,040 --> 00:00:54,810 It tells it to use border box, whatever that is, and put no padding around it in the same way. 13 00:00:54,810 --> 00:00:57,430 Text area, which is another type of input on the form. 14 00:00:57,900 --> 00:01:02,200 This has overflow auto and it resize is vertical, so it doesn't matter what those are. 15 00:01:03,660 --> 00:01:09,630 If I go back to my HTML and delete that, let's say I just cut this edit here, I'm going to cut it 16 00:01:09,630 --> 00:01:11,040 because I need to post it back in a minute. 17 00:01:11,280 --> 00:01:16,880 I'm going to cut that, save the page, go back to my Web browser and reload this page. 18 00:01:16,890 --> 00:01:18,770 All of that success is going to be gone. 19 00:01:18,780 --> 00:01:19,740 And here's what it looks like. 20 00:01:20,220 --> 00:01:21,010 It's pretty ugly. 21 00:01:22,260 --> 00:01:27,710 Now, if I go back there and paste this back in and save it, go back and reload, it comes back. 22 00:01:28,080 --> 00:01:33,900 So when you take that scissors out, it actually removes all of bootstraps formatting and just tries 23 00:01:33,900 --> 00:01:35,600 to redo the page as best as it can. 24 00:01:35,970 --> 00:01:39,390 So we wind up having a bunch of things like in our form. 25 00:01:39,960 --> 00:01:46,290 If I go down here and look at the form we're building, which is somewhere in here, here when I have 26 00:01:46,710 --> 00:01:52,160 this class form control, that's what makes this look so nice, actually. 27 00:01:52,170 --> 00:01:54,120 Now this is the one that I'm creating dynamically. 28 00:01:54,130 --> 00:01:55,890 So let's find the actual form here. 29 00:01:55,930 --> 00:01:56,730 There it is right here. 30 00:01:57,090 --> 00:02:03,750 If I take this out, class equals form control a cut that save it and go back and reload this page. 31 00:02:04,020 --> 00:02:06,060 This one should change and it does. 32 00:02:06,250 --> 00:02:12,060 OK, and if I put it back and save and reload, it looks the way they're supposed to. 33 00:02:12,540 --> 00:02:18,750 So what I'm doing is just telling my web browser how to render the elements on the page, how to style 34 00:02:18,750 --> 00:02:18,990 them. 35 00:02:18,990 --> 00:02:20,970 And I have a fair bit of control over that sort of thing. 36 00:02:21,510 --> 00:02:24,690 So right now, we have these things that we've added. 37 00:02:25,140 --> 00:02:27,050 We've put it right into the page. 38 00:02:27,450 --> 00:02:29,820 These ones are loaded off of a remote server. 39 00:02:29,880 --> 00:02:35,040 These ones are embedded into my page now to clean things up because this gets kind of ugly and it takes 40 00:02:35,040 --> 00:02:36,320 up a lot of space in the file. 41 00:02:36,450 --> 00:02:38,850 I can actually create my own file. 42 00:02:39,090 --> 00:02:43,050 So I'm going to look over here on the left hand side where it shows all the things I have this static 43 00:02:43,050 --> 00:02:47,280 folder, and inside of that, all I have is an image folder with images in it. 44 00:02:47,310 --> 00:02:53,040 And I'm going to create another folder directory and I'll call it access for style. 45 00:02:53,400 --> 00:03:00,750 And inside of that, I'll create a new file, which I'll call Styles Access and I guess I'll edit to 46 00:03:00,750 --> 00:03:00,990 get. 47 00:03:01,200 --> 00:03:05,070 Then I'm going to go back to my reservation page and I'm going to cut this stuff out of here. 48 00:03:05,130 --> 00:03:06,300 Not the style tags. 49 00:03:06,300 --> 00:03:07,200 I don't want those. 50 00:03:08,040 --> 00:03:12,990 In fact, I'm going to delete those and then I'll go back to the file. 51 00:03:12,990 --> 00:03:15,990 I just created styles, desks and just paste in my directives. 52 00:03:16,200 --> 00:03:22,410 Save those and I'll go back to my reservation page and just like I'm loading things remotely, so I'm 53 00:03:22,410 --> 00:03:27,300 going to unpackaged dot com and loading Natixis, I can actually load local stuff as well. 54 00:03:27,780 --> 00:03:35,410 So Link Rel equals stylesheet, which tells it what what we're linking to type is Texas. 55 00:03:35,420 --> 00:03:37,830 It's a text and it's a cascading stylesheet. 56 00:03:38,220 --> 00:03:45,270 And the trick in this case, I'm just going to go to my folder, static it inside of that I have a folder 57 00:03:45,270 --> 00:03:50,140 called Access and inside of that I have a folder called Styles Dot System, which I've got a typewriter, 58 00:03:50,140 --> 00:03:53,310 a lot work and I can save it. 59 00:03:53,940 --> 00:03:57,660 So if I come back here now and reload this page, nothing should change and it doesn't. 60 00:03:57,730 --> 00:04:04,200 But when I view the source now, I'm referring to that stylized access and that makes things much cleaner. 61 00:04:04,530 --> 00:04:09,330 And the great thing about that, it means that I don't have to on every one of these pages, like a 62 00:04:09,330 --> 00:04:10,890 boat, I have a Stiles here. 63 00:04:10,890 --> 00:04:11,760 I can delete that. 64 00:04:12,390 --> 00:04:16,470 I don't need it anymore and I can just paste in the same link that I have here. 65 00:04:18,130 --> 00:04:21,250 Copy paste. 66 00:04:23,430 --> 00:04:28,750 And I probably want all of these things, so I may as well just copy them all eventually they're going 67 00:04:28,750 --> 00:04:32,240 to go into a layout template and CSS, but we'll copy them right now. 68 00:04:32,260 --> 00:04:33,160 It's not going to hurt to do it. 69 00:04:33,550 --> 00:04:37,500 So I'll put this and replace all of this with what I have in there. 70 00:04:37,900 --> 00:04:43,550 Do the same thing for the contact page so I can get rid of all of this and pasted what I have in there. 71 00:04:44,410 --> 00:04:45,910 Same thing for Generals'. 72 00:04:46,570 --> 00:04:47,610 Go to the top there. 73 00:04:48,100 --> 00:04:57,610 Replace all of this with my imports, my index page, replace all of this with my imports. 74 00:04:57,610 --> 00:04:58,820 And finally, the major speech. 75 00:04:58,840 --> 00:05:06,130 Now you can see hopefully why it's so convenient to have a layout in Goldwing templates. 76 00:05:06,490 --> 00:05:08,110 Like we looked at a few lectures ago. 77 00:05:08,440 --> 00:05:13,090 I don't have to make changes in one, two, three, four, five, six files. 78 00:05:13,330 --> 00:05:14,880 I just make it in one layer. 79 00:05:14,890 --> 00:05:16,340 But we'll get to that when we cut this up. 80 00:05:17,710 --> 00:05:19,650 So now that I have these style. 81 00:05:19,680 --> 00:05:20,950 So let's look at these for a second. 82 00:05:20,950 --> 00:05:22,290 Let's go back to the reservation page. 83 00:05:22,300 --> 00:05:23,380 That's the one we're working on. 84 00:05:23,560 --> 00:05:25,720 And I'm going to look at the page. 85 00:05:25,720 --> 00:05:26,440 And I have this. 86 00:05:26,470 --> 00:05:27,850 This is some text. 87 00:05:28,660 --> 00:05:31,560 I want to change the styling just for that. 88 00:05:31,570 --> 00:05:34,210 So let's find that this is some text and already has an idea. 89 00:05:34,390 --> 00:05:34,870 That's great. 90 00:05:35,230 --> 00:05:38,830 But actually, I'm actually not going to use the idea to make this change. 91 00:05:39,070 --> 00:05:44,200 I'm going to at the very top of this page, redefine the style. 92 00:05:44,450 --> 00:05:50,950 So I'll put it in a style again, four paragraph text so I can actually change HTML elements like this 93 00:05:51,250 --> 00:05:52,690 and I can say color red. 94 00:05:53,530 --> 00:05:58,510 And if I save that and reload this page, this is a paragraph so it can change to red. 95 00:05:58,750 --> 00:05:59,400 And it did. 96 00:06:00,220 --> 00:06:07,060 And then if underneath that, if I create exactly the same thing but make color green, what's going 97 00:06:07,060 --> 00:06:07,430 to happen? 98 00:06:07,450 --> 00:06:12,100 Well, what I'm telling it here, first of all, I'm saying every time you see a paragraph to make the 99 00:06:12,100 --> 00:06:17,530 text read and then immediately after that, I'm saying every time you see a paragraph tag, make the 100 00:06:17,530 --> 00:06:18,190 color green. 101 00:06:18,250 --> 00:06:20,590 What's going to happen if I love this? 102 00:06:23,190 --> 00:06:32,010 Save reservation on Actimel, if I reload this, it's now green, and that's because I have overridden 103 00:06:32,010 --> 00:06:37,410 the style and the order that cascading stylesheet directives appearance actually matters. 104 00:06:37,740 --> 00:06:41,910 So this one says, yeah, make it red, but then immediately after it, I override that. 105 00:06:41,940 --> 00:06:45,040 So now overwriting styles is incredibly helpful. 106 00:06:45,810 --> 00:06:51,210 For example, I'm going to delete this because I don't want to write down the order matters. 107 00:06:51,540 --> 00:06:56,770 The most recent directive, the last directive you give will always be the one that takes place. 108 00:06:57,180 --> 00:06:58,710 Now, I'm here on this line. 109 00:06:58,920 --> 00:07:06,930 I the important bootstraps style it which means if I do the import here and then after it, I override 110 00:07:06,930 --> 00:07:07,910 those directives. 111 00:07:08,220 --> 00:07:14,580 So we have a button here, for example, called Click Me and let's find out what that class's button 112 00:07:14,580 --> 00:07:15,640 button primary. 113 00:07:15,660 --> 00:07:17,240 Well, let's try changing it styles. 114 00:07:17,610 --> 00:07:21,060 So first of all, I'm going to do it manually right in the browser. 115 00:07:21,060 --> 00:07:22,110 I'm going to right. 116 00:07:22,110 --> 00:07:26,770 Click on this button and choose inspect element, which is here somewhere. 117 00:07:26,790 --> 00:07:27,200 There it is. 118 00:07:28,170 --> 00:07:30,840 And that shows me in my inspector. 119 00:07:31,230 --> 00:07:32,550 Here's my my button. 120 00:07:32,550 --> 00:07:34,800 And down here it tells me what its directives are. 121 00:07:34,830 --> 00:07:39,850 So this element button not disabled, not disabled, but let alone secondary. 122 00:07:39,900 --> 00:07:40,630 This has a color. 123 00:07:41,160 --> 00:07:47,730 Now, if I take that and change the color to green with no hashmark because it's just a directive green, 124 00:07:48,660 --> 00:07:50,190 it changed it to green. 125 00:07:50,190 --> 00:07:54,930 The click me is actually green if I change it to red and hit return. 126 00:07:54,960 --> 00:07:55,710 Now it's red. 127 00:07:55,950 --> 00:07:57,560 That means I can override this style. 128 00:07:57,870 --> 00:08:03,120 So what I can do just to make things really easy is say copy this stuff. 129 00:08:03,120 --> 00:08:05,280 So I'll copy everything that I see in here. 130 00:08:06,090 --> 00:08:08,790 And I can do that probably just by clicking on this copy rule. 131 00:08:08,850 --> 00:08:09,120 Right. 132 00:08:09,120 --> 00:08:09,500 Click on it. 133 00:08:09,540 --> 00:08:10,320 Just copy rule. 134 00:08:10,800 --> 00:08:19,650 Go back to my HTML, which is right here and in my style tags I'm going to override bootstraps default 135 00:08:19,650 --> 00:08:22,290 formatting so red I will change. 136 00:08:22,380 --> 00:08:23,630 I'll just take that out entirely. 137 00:08:23,640 --> 00:08:28,770 OK, so because I've taken that out entirely, it's the only thing I'm overwriting is the border color. 138 00:08:29,040 --> 00:08:35,130 So if I save this and go back and reload the page, this should look exactly like boot straps default 139 00:08:35,130 --> 00:08:35,430 style. 140 00:08:35,580 --> 00:08:36,680 And it does. 141 00:08:37,260 --> 00:08:44,700 Now if I say, well, let's change the the color and we'll choose, oh, we'll just choose one of these. 142 00:08:44,700 --> 00:08:49,590 So we'll choose whatever that color is kind of a blue I think, kind of a sleek blue and go back and 143 00:08:49,590 --> 00:08:50,400 reload the page. 144 00:08:50,610 --> 00:08:51,750 It changes the color. 145 00:08:51,750 --> 00:08:52,620 Hard to see that one. 146 00:08:52,620 --> 00:08:54,270 Let's make one that's a little easier to see. 147 00:08:54,570 --> 00:08:56,160 So I'll change the color too. 148 00:08:56,160 --> 00:09:00,570 And I'll let my browser choose something that's easier to spot Aqua. 149 00:09:01,740 --> 00:09:04,500 So I'll choose that save, reload. 150 00:09:04,650 --> 00:09:05,550 And now it's Aqua. 151 00:09:05,790 --> 00:09:07,110 So that's one thing you can do. 152 00:09:07,110 --> 00:09:08,400 And it's really convenient. 153 00:09:08,400 --> 00:09:14,970 If you don't like boot straps, default CSC, for example, I can actually change the access. 154 00:09:15,300 --> 00:09:17,100 Now there's other ways of addressing things. 155 00:09:17,100 --> 00:09:20,160 So far we've looked at a direct class. 156 00:09:20,610 --> 00:09:25,860 We've looked at a direct tag like P, so one of the built in HTML tags, we can actually do it other 157 00:09:25,860 --> 00:09:26,160 ways. 158 00:09:26,220 --> 00:09:35,550 So the syntax, if I want to refer to every HTML element of a particular name, I can use P to get paragraph 159 00:09:35,550 --> 00:09:38,580 tags or I can go div to get all dips. 160 00:09:38,790 --> 00:09:41,520 OK, so that's how you refer to HTML elements. 161 00:09:41,820 --> 00:09:46,590 If I want to refer to all elements of a particular class, this is the syntax I use. 162 00:09:46,590 --> 00:09:49,650 I put a dot in front of the class name, so let's try that. 163 00:09:49,650 --> 00:09:55,710 Let's come down here and find our paragraph wherever it is and we'll duplicate that a few times and 164 00:09:55,710 --> 00:09:56,640 we'll get this. 165 00:09:56,680 --> 00:10:03,240 Let's not duplicate the duplicate it once, get rid of the ID and instead put class equals and I'll 166 00:10:03,240 --> 00:10:05,580 leave that NPF right now and I'll duplicate it three times. 167 00:10:05,580 --> 00:10:12,270 So I have three paragraphs and I'll give the first one a class of para class and I'll leave the other 168 00:10:12,270 --> 00:10:12,810 two empty. 169 00:10:13,320 --> 00:10:18,660 OK, so if I come here right now, there is no class per class, so it just puts in some paragraphs 170 00:10:18,750 --> 00:10:19,110 as well. 171 00:10:19,140 --> 00:10:23,880 I can't find a class with any instructions, so I'm just going to ignore that declaration. 172 00:10:24,360 --> 00:10:28,260 But if I come back up here and I called my class para class, I think. 173 00:10:29,710 --> 00:10:30,190 Where is it? 174 00:10:30,220 --> 00:10:30,630 There it is. 175 00:10:30,640 --> 00:10:36,220 Yep, I now want to give some directions to that class, so I'm going to come up here and I'm going 176 00:10:36,220 --> 00:10:39,630 to say dot class and I'll give it some directives. 177 00:10:39,640 --> 00:10:42,430 So let's change the font size, font size. 178 00:10:42,970 --> 00:10:45,400 And that can be a number. 179 00:10:46,410 --> 00:10:54,760 Like 10 points or 25 pixels or three M's, let's leave three M's. 180 00:10:54,780 --> 00:11:00,930 So what is going to do for any time it sees the class A class, it will change the font size to the 181 00:11:00,930 --> 00:11:05,520 same size as three capital letter Ms. 182 00:11:05,550 --> 00:11:06,240 As in Mary. 183 00:11:06,660 --> 00:11:08,970 So I reload this and it should affect just one paragraph. 184 00:11:09,180 --> 00:11:10,350 And it does. 185 00:11:10,800 --> 00:11:14,340 But if I add that class to another paragraph like right here. 186 00:11:17,200 --> 00:11:24,250 Class and reload the page now it affects, too, so you can affect multiple things by referring to a 187 00:11:24,250 --> 00:11:27,820 single class name and I can also put two classes in there. 188 00:11:28,300 --> 00:11:30,160 So I call it second class. 189 00:11:31,480 --> 00:11:36,190 So now this paragraph, the one right after the first one with the ID has two classes. 190 00:11:36,280 --> 00:11:38,410 So let's define some rules for the second class. 191 00:11:40,240 --> 00:11:46,540 Which I will call because I want to go by classman starts with the DOT second class and we'll say color 192 00:11:47,110 --> 00:11:47,530 red. 193 00:11:48,910 --> 00:11:53,700 So now if I look at my formatting directives here, I have a paragraph with an idea. 194 00:11:54,010 --> 00:11:57,370 So it just goes the default paragraph because I've done nothing with that clause. 195 00:11:58,660 --> 00:12:04,570 In the second one, I said, give it the class of a class and the class of second class and the one 196 00:12:04,570 --> 00:12:06,550 after it just has the class A class. 197 00:12:06,610 --> 00:12:07,720 So what do you think's going to happen? 198 00:12:07,840 --> 00:12:08,820 Well, let's find out. 199 00:12:09,760 --> 00:12:10,690 Reload the page. 200 00:12:11,260 --> 00:12:17,170 And this one, because it has two classes per class and second class applies all of the styling for 201 00:12:17,170 --> 00:12:19,160 both of those classes to this text. 202 00:12:19,510 --> 00:12:21,270 This one just has a class. 203 00:12:21,430 --> 00:12:25,540 So it actually only gives the rules that are found in class. 204 00:12:26,230 --> 00:12:29,020 Now, the third way to refer to things is by ID. 205 00:12:29,740 --> 00:12:38,380 So I can say ID for this last paragraph is last para now to refer things to things, but ID use a different 206 00:12:38,380 --> 00:12:39,040 syntax. 207 00:12:39,290 --> 00:12:46,570 So here because I'm going by ID, I start with the hashmark and I called this one last para. 208 00:12:48,620 --> 00:12:54,380 And now I can give some directions in there so I can say, well, it's a text declaration, there's 209 00:12:54,380 --> 00:12:57,640 another one and the text declaration is going to be underlined. 210 00:12:59,480 --> 00:13:01,840 So I'm referring to one element. 211 00:13:01,850 --> 00:13:08,990 And because this is an idea, there should be one and only one element in the entire HTML with that 212 00:13:08,990 --> 00:13:09,520 ID. 213 00:13:10,040 --> 00:13:15,890 But I've told it, whenever you see the element with the ID of last page, give it an underline. 214 00:13:16,070 --> 00:13:16,790 So let's do that. 215 00:13:17,570 --> 00:13:18,440 And there it does. 216 00:13:18,440 --> 00:13:19,590 It gives it an underlying. 217 00:13:20,330 --> 00:13:22,670 So that is how CSC works. 218 00:13:22,670 --> 00:13:25,530 And for our purposes right now, that is sufficient. 219 00:13:25,790 --> 00:13:34,130 So all I need to be able to do at this moment is to refer to things by class, by HTML tag or by ID. 220 00:13:34,460 --> 00:13:40,190 And as we go through the course of the lectures, we'll actually have a little more control to show 221 00:13:40,190 --> 00:13:42,800 you how you can do things in a little more interesting ways. 222 00:13:43,040 --> 00:13:46,910 For right now, I just want to be able to refer to things and make sure that you have an understanding 223 00:13:46,910 --> 00:13:54,500 of how to select things by HTML, tag, by ID or by class, and to understand that in cascading style 224 00:13:54,500 --> 00:14:01,520 sheets, the most recent directive, the last one you give your your page, that's the one that will 225 00:14:01,520 --> 00:14:06,860 have effect, which allows us to override things like boot straps, default styling in the same way. 226 00:14:07,760 --> 00:14:09,970 Nodi has a little thing that shows up at the top. 227 00:14:09,980 --> 00:14:14,750 I can actually control how that looks as well and I can control Sweedler. 228 00:14:14,750 --> 00:14:18,620 Pretty much anything that you display in a page, you have some control over the style. 229 00:14:19,070 --> 00:14:19,430 All right. 230 00:14:19,460 --> 00:14:24,320 That's it for Kath's for the moment, will be seeing that more regularly as we progress through the 231 00:14:24,320 --> 00:14:25,520 remainder of the course.