1 00:00:00,000 --> 00:00:02,550 BRIAN YU: Using HTML, we now have the ability 2 00:00:02,550 --> 00:00:06,180 to build web pages with a number of different components and nested tags 3 00:00:06,180 --> 00:00:09,750 within each other to describe the structure of any web page we want. 4 00:00:09,750 --> 00:00:12,275 Of course, our web pages right now look pretty simple. 5 00:00:12,275 --> 00:00:13,650 They all have a white background. 6 00:00:13,650 --> 00:00:15,120 Everything's from the same font. 7 00:00:15,120 --> 00:00:17,680 Everything is aligned on the left-hand side of the screen. 8 00:00:17,680 --> 00:00:20,717 And what we might like to do is add some styling to our web page, 9 00:00:20,717 --> 00:00:22,800 make it look a little more aesthetically pleasing, 10 00:00:22,800 --> 00:00:25,320 make our web pages look a little bit more personal. 11 00:00:25,320 --> 00:00:27,870 And that's what CSS is going to allow us to do. 12 00:00:27,870 --> 00:00:30,600 CSS, which stands for a Cascading Style Sheets, 13 00:00:30,600 --> 00:00:34,110 is a language that's going to let us add style to our web pages 14 00:00:34,110 --> 00:00:37,630 by adding some additional attributes to our HTML elements. 15 00:00:37,630 --> 00:00:40,260 Let's take a look at how that's going to work. 16 00:00:40,260 --> 00:00:44,100 Here we have a very simple HTML page written in index.html 17 00:00:44,100 --> 00:00:47,300 that just says we have an HTML page, whose title is hello. 18 00:00:47,300 --> 00:00:50,100 And inside the body of the web page, we have in H1 19 00:00:50,100 --> 00:00:54,000 tag that says we have a big heading at the top, that says hello world. 20 00:00:54,000 --> 00:00:56,340 If we take a look at what this page actually looks like, 21 00:00:56,340 --> 00:01:00,210 as by running HTTP server, and then loading index.html, 22 00:01:00,210 --> 00:01:04,110 you'll see that in big black letters we have hello world. 23 00:01:04,110 --> 00:01:06,910 How might we want to change the style of this? 24 00:01:06,910 --> 00:01:10,110 Well, one thing we might want to do is change the color of the text. 25 00:01:10,110 --> 00:01:13,860 We might want hello world to be in blue instead of black, for example. 26 00:01:13,860 --> 00:01:15,310 How would we do that? 27 00:01:15,310 --> 00:01:18,990 Well, it turns out we can add an attribute to this H1 tag. 28 00:01:18,990 --> 00:01:22,980 Recall that we've used attributes before to add additional information to tags 29 00:01:22,980 --> 00:01:23,970 that we've used. 30 00:01:23,970 --> 00:01:26,760 We added in an HREF attribute to our anchor tags 31 00:01:26,760 --> 00:01:30,030 to specify what URL we want users to be taken to when 32 00:01:30,030 --> 00:01:31,620 they click on a particular link. 33 00:01:31,620 --> 00:01:34,170 We added a source attribute to our image tag 34 00:01:34,170 --> 00:01:38,160 to specify what image we actually want to display in the web page 35 00:01:38,160 --> 00:01:40,860 at that particular position in the page. 36 00:01:40,860 --> 00:01:43,140 And likewise, we can add another attribute 37 00:01:43,140 --> 00:01:46,800 to our H1 tag called style, which is going 38 00:01:46,800 --> 00:01:50,730 to let us add CSS, some Cascading Style Sheets code that 39 00:01:50,730 --> 00:01:54,790 is going to let us choose how we would like to style this particular HTML 40 00:01:54,790 --> 00:01:55,990 element. 41 00:01:55,990 --> 00:01:59,970 So I'll set the style equal to some string in quotation marks. 42 00:01:59,970 --> 00:02:03,350 And here's where I actually begin to write some CSS code. 43 00:02:03,350 --> 00:02:08,610 And what I'm going to write is color:blue, followed by a semicolon. 44 00:02:08,610 --> 00:02:10,949 And even if you've never seen CSS before, 45 00:02:10,949 --> 00:02:12,990 what you might guess this is going to do is 46 00:02:12,990 --> 00:02:16,380 take this H1 element, this heading that appears in my web page, 47 00:02:16,380 --> 00:02:19,080 and change its color to blue. 48 00:02:19,080 --> 00:02:19,830 Let's take a look. 49 00:02:19,830 --> 00:02:22,950 If I go back to my web browser and refresh the page, 50 00:02:22,950 --> 00:02:25,410 indeed now hello world, instead of being in black, 51 00:02:25,410 --> 00:02:27,990 has now changed to be in blue instead. 52 00:02:27,990 --> 00:02:31,290 So let's now dissect this and understand what exactly is happening 53 00:02:31,290 --> 00:02:33,420 when I'm specifying this color. 54 00:02:33,420 --> 00:02:36,540 Here, we added a style attribute to H1. 55 00:02:36,540 --> 00:02:39,720 And then in quotation marks we're including the CSS code. 56 00:02:39,720 --> 00:02:43,860 Color here is one of many different CSS properties, 57 00:02:43,860 --> 00:02:46,530 style attributes of elements that we have the ability 58 00:02:46,530 --> 00:02:48,750 to change if we would like to. 59 00:02:48,750 --> 00:02:53,460 The colon says, what comes next is the value for the CSS property 60 00:02:53,460 --> 00:02:54,750 that should be there. 61 00:02:54,750 --> 00:02:58,530 And here we're specifying blue to mean the color of this H1 element 62 00:02:58,530 --> 00:02:59,490 should be blue. 63 00:02:59,490 --> 00:03:02,250 And the semicolon comes at the end just to finish the thought. 64 00:03:02,250 --> 00:03:05,370 The color of this H1 element is going to be blue. 65 00:03:05,370 --> 00:03:09,270 And we can apply this style, not just to H1s, but to other HTML elements 66 00:03:09,270 --> 00:03:10,140 as well. 67 00:03:10,140 --> 00:03:14,350 I could beneath it add a paragraph that says, this is my web page. 68 00:03:14,350 --> 00:03:17,040 And by default, it's going to be black. 69 00:03:17,040 --> 00:03:21,390 If I refresh the page, only hello world is in blue because I only added 70 00:03:21,390 --> 00:03:27,930 the style color:blue attribute to the H1 tag and not to the paragraph. 71 00:03:27,930 --> 00:03:30,360 Of course, if I wanted the paragraph to also be blue, 72 00:03:30,360 --> 00:03:34,460 I could say the paragraph style is color:colon. 73 00:03:34,460 --> 00:03:38,940 And that, when I reload the page, is also going to display both hello world 74 00:03:38,940 --> 00:03:42,840 and this is my web page both using blue. 75 00:03:42,840 --> 00:03:45,030 Of course now at this point, this should strike you 76 00:03:45,030 --> 00:03:47,490 as potentially suboptimal design. 77 00:03:47,490 --> 00:03:51,480 Here I've repeated the same code, saying the H1 has a color of blue, 78 00:03:51,480 --> 00:03:53,040 the paragraph has a color of blue. 79 00:03:53,040 --> 00:03:55,710 Maybe I just wanted the whole web page to be blue. 80 00:03:55,710 --> 00:03:59,970 But rather than adding color:colon blue to every single HTML element, 81 00:03:59,970 --> 00:04:01,750 we can do better than that. 82 00:04:01,750 --> 00:04:06,180 So instead, I'll remove the style attribute from the H1 83 00:04:06,180 --> 00:04:09,810 and from the paragraph and instead add it to the body. 84 00:04:09,810 --> 00:04:13,150 I'll say for the body, let's give this body 85 00:04:13,150 --> 00:04:16,790 a color of blue, which means for all of the elements contained within it, 86 00:04:16,790 --> 00:04:19,769 both the heading that says hello world, and the paragraph that 87 00:04:19,769 --> 00:04:22,470 says this is my web page, I would like for all of that 88 00:04:22,470 --> 00:04:24,940 to show up with a color of blue. 89 00:04:24,940 --> 00:04:27,690 Now if I refresh the page, it looks exactly the same. 90 00:04:27,690 --> 00:04:30,900 Hello world is still blue, the paragraph that says this is my web page 91 00:04:30,900 --> 00:04:31,740 is still blue. 92 00:04:31,740 --> 00:04:35,040 But now, rather than including that CSS property twice, 93 00:04:35,040 --> 00:04:36,630 I've only included it once. 94 00:04:36,630 --> 00:04:38,910 And the children element, so to speak, the things 95 00:04:38,910 --> 00:04:42,600 that are nested within body element, are all 96 00:04:42,600 --> 00:04:47,370 going to inherit the CSS properties from the parent element, so to speak. 97 00:04:47,370 --> 00:04:51,420 So H1 and the paragraph are getting the color information 98 00:04:51,420 --> 00:04:54,660 from the body tag, where we specify that for the body 99 00:04:54,660 --> 00:04:57,370 the style should have a color of blue. 100 00:04:57,370 --> 00:05:01,560 Now if I were to change that to color:colon red instead, for example, 101 00:05:01,560 --> 00:05:04,200 and then reloaded the page, now both elements, 102 00:05:04,200 --> 00:05:08,460 the heading and the paragraph, will both change their style to be red instead 103 00:05:08,460 --> 00:05:09,870 of blue. 104 00:05:09,870 --> 00:05:13,800 So now we've seen the ability to change the color of an HTML element 105 00:05:13,800 --> 00:05:16,830 as by adding a style attribute to that HTML tag, 106 00:05:16,830 --> 00:05:19,440 and then specifying the color CSS property, 107 00:05:19,440 --> 00:05:23,490 followed by whatever color we want to make that particular HTML element. 108 00:05:23,490 --> 00:05:25,610 But there are other properties we can add as well. 109 00:05:25,610 --> 00:05:27,610 One thing you might want to change, for example, 110 00:05:27,610 --> 00:05:30,390 is the alignment of a particular HTML element. 111 00:05:30,390 --> 00:05:33,060 By default, everything in HTML is left-aligned. 112 00:05:33,060 --> 00:05:35,820 The heading is along the left, the paragraphs are left-aligned, 113 00:05:35,820 --> 00:05:37,290 the images are left-aligned. 114 00:05:37,290 --> 00:05:39,420 We might often want something to be right-aligned 115 00:05:39,420 --> 00:05:41,410 or in the center, for example. 116 00:05:41,410 --> 00:05:45,300 So to do that, we could take, for example, for this H1 tag, 117 00:05:45,300 --> 00:05:53,120 let's add a style attribute back to it and say, text-align:center. 118 00:05:53,120 --> 00:05:55,880 Text-align here is the name of the CSS property 119 00:05:55,880 --> 00:05:59,180 that determines how things should be aligned for this particular HTML 120 00:05:59,180 --> 00:05:59,990 element. 121 00:05:59,990 --> 00:06:02,900 And center is one of the possible values it could take on. 122 00:06:02,900 --> 00:06:05,060 It could be left or center or right. 123 00:06:05,060 --> 00:06:07,730 And here I'd like to say for this H1 tag, let's go ahead 124 00:06:07,730 --> 00:06:10,130 and take the element and center it. 125 00:06:10,130 --> 00:06:15,390 Such that now if I go back to index.html and I refresh the page, 126 00:06:15,390 --> 00:06:18,568 we now see that hello world has been centered. 127 00:06:18,568 --> 00:06:19,860 And we could do the same thing. 128 00:06:19,860 --> 00:06:24,640 I could have instead put the style on the paragraph instead of the H1. 129 00:06:24,640 --> 00:06:29,210 And if I do that, well, then instead of the heading being centered, 130 00:06:29,210 --> 00:06:31,020 then the paragraph is going to be centered. 131 00:06:31,020 --> 00:06:32,640 Hello world is left-aligned. 132 00:06:32,640 --> 00:06:34,880 This is my web page is centered. 133 00:06:34,880 --> 00:06:38,360 And if I think this is my web page right now looks a little bit small, 134 00:06:38,360 --> 00:06:43,190 I can change the font size of a particular element using CSS as well. 135 00:06:43,190 --> 00:06:46,970 Here, what I'd like to do is specify that the text alignment is centered. 136 00:06:46,970 --> 00:06:52,460 But I would also like to specify that the font size, font-size, is 137 00:06:52,460 --> 00:06:54,815 going to be large, for example. 138 00:06:54,815 --> 00:06:56,690 I could be very precise and specify something 139 00:06:56,690 --> 00:06:59,540 like I want it to be a 24-point font, for example. 140 00:06:59,540 --> 00:07:02,740 But here I'm just saying that I want the font size to be large. 141 00:07:02,740 --> 00:07:05,110 And now I can go back, refresh the page. 142 00:07:05,110 --> 00:07:06,860 And now you'll notice, this is my web page 143 00:07:06,860 --> 00:07:09,170 got a little bit bigger because I specified that I 144 00:07:09,170 --> 00:07:11,393 wanted the font size to be large. 145 00:07:11,393 --> 00:07:13,310 And here you'll notice that for the first time 146 00:07:13,310 --> 00:07:17,990 we're applying multiple CSS properties to the same HTML element. 147 00:07:17,990 --> 00:07:22,580 On this paragraph, I've said that I want the text alignment to be centered 148 00:07:22,580 --> 00:07:25,280 and I want the font size to be large. 149 00:07:25,280 --> 00:07:26,240 And you can do that. 150 00:07:26,240 --> 00:07:30,410 Every CSS property followed by value just has a semicolon at the end of it. 151 00:07:30,410 --> 00:07:34,310 And so that semicolon separates multiple possible CSS properties 152 00:07:34,310 --> 00:07:36,433 that you could add to an HTML element. 153 00:07:36,433 --> 00:07:38,600 I could say the text element is going to be centered 154 00:07:38,600 --> 00:07:42,590 and the font size is going to be large as two distinct thoughts that 155 00:07:42,590 --> 00:07:45,300 are separated by that semicolon. 156 00:07:45,300 --> 00:07:47,153 So now we have the text is red. 157 00:07:47,153 --> 00:07:48,820 We have this paragraph that is centered. 158 00:07:48,820 --> 00:07:50,242 We have a font size that is large. 159 00:07:50,242 --> 00:07:51,950 And there are many, many other properties 160 00:07:51,950 --> 00:07:54,330 that we could add to this page as well. 161 00:07:54,330 --> 00:07:57,890 For example, if I wanted the background color of my entire page to be blue, 162 00:07:57,890 --> 00:08:02,630 for instance, I could up in the body say that for the whole body of the page 163 00:08:02,630 --> 00:08:05,180 the color is red, meaning text that shows up 164 00:08:05,180 --> 00:08:07,220 on the page, that should be red. 165 00:08:07,220 --> 00:08:12,170 But maybe I want the background color using the background-color property 166 00:08:12,170 --> 00:08:15,040 to be blue, for example. 167 00:08:15,040 --> 00:08:17,490 Now, if I go back to this web page and refresh it, 168 00:08:17,490 --> 00:08:20,040 I now see that the background of this page is blue. 169 00:08:20,040 --> 00:08:23,220 I have a heading in red, a centered paragraph that's large, 170 00:08:23,220 --> 00:08:25,050 and then a background that's all blue. 171 00:08:25,050 --> 00:08:27,780 And so you can add more and more of these CSS properties 172 00:08:27,780 --> 00:08:29,940 to your HTML elements to get them to look 173 00:08:29,940 --> 00:08:33,179 how you want them to look, changing their color, changing their size, 174 00:08:33,179 --> 00:08:36,539 changing their alignment, and so forth. 175 00:08:36,539 --> 00:08:39,450 So let's now take a look at a more sophisticated web page 176 00:08:39,450 --> 00:08:42,539 that we might want to add some CSS styling to. 177 00:08:42,539 --> 00:08:46,140 So here, I'll go ahead and remove the styling that's already on this page. 178 00:08:46,140 --> 00:08:48,420 And in this case I'll add some H2s. 179 00:08:48,420 --> 00:08:50,930 Recall that H2s, like H1s, are headings. 180 00:08:50,930 --> 00:08:53,250 They're just a little bit smaller, generally used 181 00:08:53,250 --> 00:08:56,070 for subsections of a web page, for example. 182 00:08:56,070 --> 00:09:00,180 And so here is maybe a subsection 1 of the web page. 183 00:09:00,180 --> 00:09:05,390 And beneath that, I have a second subsection of the web page. 184 00:09:05,390 --> 00:09:07,420 And maybe there's some paragraphs of text. 185 00:09:07,420 --> 00:09:08,730 This is some text. 186 00:09:08,730 --> 00:09:13,897 And then beneath 2, this is some more text. 187 00:09:13,897 --> 00:09:15,730 And here for instance, imagine that I wanted 188 00:09:15,730 --> 00:09:19,990 to take both of these subsections, subsection 1 and subsection 2, and give 189 00:09:19,990 --> 00:09:21,010 them the same style. 190 00:09:21,010 --> 00:09:25,270 I would like for both of the subsection headings to be centered, for example. 191 00:09:25,270 --> 00:09:28,720 And I'd like for both of them to be blue instead of black by default. 192 00:09:28,720 --> 00:09:30,770 Because right now if I were to load this page, 193 00:09:30,770 --> 00:09:33,940 you'll see that I have subsection 1, subsection 2, followed by this 194 00:09:33,940 --> 00:09:34,780 is some text. 195 00:09:34,780 --> 00:09:36,710 And the web page is very simple. 196 00:09:36,710 --> 00:09:38,390 So how might I do that? 197 00:09:38,390 --> 00:09:42,640 Well, on this H2 element, I might say, let's add some style information. 198 00:09:42,640 --> 00:09:46,220 This time I want the text alignment to be centered. 199 00:09:46,220 --> 00:09:50,030 And I would like for the color to be blue. 200 00:09:50,030 --> 00:09:52,660 So again, some CSS code that lets me specify 201 00:09:52,660 --> 00:09:55,630 how I would like for this CSS element to be aligned 202 00:09:55,630 --> 00:09:57,960 and what color I would like it to have. 203 00:09:57,960 --> 00:10:00,460 And I can do the same thing for the other subsection 204 00:10:00,460 --> 00:10:02,620 if I would like for it to be styled the same way. 205 00:10:02,620 --> 00:10:08,830 I could say, style equals text-align:center; color is blue. 206 00:10:08,830 --> 00:10:12,550 And so now by doing that, if I go back to the HTML page and refresh it, 207 00:10:12,550 --> 00:10:15,610 you'll notice the result is exactly as I intended it for it to be. 208 00:10:15,610 --> 00:10:17,830 Each of the subsections is now centered. 209 00:10:17,830 --> 00:10:19,540 And instead of being black, they're blue. 210 00:10:19,540 --> 00:10:23,680 S been able to add my custom styling to this HTML page. 211 00:10:23,680 --> 00:10:27,880 Of course, this again should strike you as potentially suboptimal design. 212 00:10:27,880 --> 00:10:31,990 Here, I've repeated almost the exact same code in two different places. 213 00:10:31,990 --> 00:10:36,520 I've specified that the style for this H2 is text-align:center, color is blue. 214 00:10:36,520 --> 00:10:40,510 And I've done the same thing for the subsection beneath it. 215 00:10:40,510 --> 00:10:43,990 Of course, before when everything I wanted to just have the same color, 216 00:10:43,990 --> 00:10:47,230 I could factor things out into the parent element and say, 217 00:10:47,230 --> 00:10:50,082 I want the body to have a color of blue, for example. 218 00:10:50,082 --> 00:10:51,790 But in this case, we can't quite do that, 219 00:10:51,790 --> 00:10:54,550 because I don't want all of the text of the page to be blue. 220 00:10:54,550 --> 00:10:59,090 I only want these H2 elements to have a color of blue. 221 00:10:59,090 --> 00:11:00,897 So how do I solve this problem? 222 00:11:00,897 --> 00:11:02,980 Well, it turns out there are multiple places where 223 00:11:02,980 --> 00:11:05,920 you can add style information that the web browser is 224 00:11:05,920 --> 00:11:08,680 able to read and understand as CSS. 225 00:11:08,680 --> 00:11:12,370 One is what we've done so far, which is called inline styling where I've 226 00:11:12,370 --> 00:11:16,530 literally added to an HTML element that I want to add style to, 227 00:11:16,530 --> 00:11:20,530 a style attribute inside of which are the CSS properties that I 228 00:11:20,530 --> 00:11:22,060 would like to add to that element. 229 00:11:22,060 --> 00:11:24,430 In this case, aligning the text to be centered 230 00:11:24,430 --> 00:11:26,780 and changing the color to be blue. 231 00:11:26,780 --> 00:11:29,380 But you could also include style information up 232 00:11:29,380 --> 00:11:34,870 in the head section of the web page by adding a style tag 233 00:11:34,870 --> 00:11:38,140 inside of which is going to be all of the style information 234 00:11:38,140 --> 00:11:39,640 for this particular website. 235 00:11:39,640 --> 00:11:43,000 We might consider this to be factoring out the style information 236 00:11:43,000 --> 00:11:46,810 from the actual body of the page where we had this inline styling 237 00:11:46,810 --> 00:11:50,290 to instead put the styling information at the top of the page where 238 00:11:50,290 --> 00:11:55,670 the same style information might be shared by multiple HTML elements. 239 00:11:55,670 --> 00:11:58,120 So here what I would like to do is specify 240 00:11:58,120 --> 00:12:02,770 that for H2s, for any H2 that shows up in the body of the page, 241 00:12:02,770 --> 00:12:05,290 I would like to style it in this particular way, 242 00:12:05,290 --> 00:12:08,020 giving it a text alignment to being centered, and giving it 243 00:12:08,020 --> 00:12:10,000 a color of blue. 244 00:12:10,000 --> 00:12:11,360 How do I do that? 245 00:12:11,360 --> 00:12:14,990 Well, up here in the style section of the head of my web page, 246 00:12:14,990 --> 00:12:17,620 I'll go ahead and type H2 to mean I would 247 00:12:17,620 --> 00:12:20,420 like to style all of the H2 elements. 248 00:12:20,420 --> 00:12:25,720 And then I'll add a pair of curly braces to mean 249 00:12:25,720 --> 00:12:29,830 here's how I would like to style anything that is an H2 element. 250 00:12:29,830 --> 00:12:34,300 I'll type text-align:center, followed by a semicolon. 251 00:12:34,300 --> 00:12:37,590 And then I'll say color:colon blue. 252 00:12:37,590 --> 00:12:38,800 And that's all I need. 253 00:12:38,800 --> 00:12:42,520 Here, between lines 9 and 13 of index.html, 254 00:12:42,520 --> 00:12:46,510 I've added some CSS code that says for every H2 element that 255 00:12:46,510 --> 00:12:50,440 shows up inside of this page, go ahead and center it, and go ahead 256 00:12:50,440 --> 00:12:52,280 and color it blue. 257 00:12:52,280 --> 00:12:55,600 So now I don't even need these style attributes on these H2 elements 258 00:12:55,600 --> 00:12:56,590 anymore. 259 00:12:56,590 --> 00:12:59,468 I can delete them. 260 00:12:59,468 --> 00:13:02,135 And this will arguably clean up your code a little bit more too. 261 00:13:02,135 --> 00:13:04,690 So that inside the body of your HTML page, 262 00:13:04,690 --> 00:13:07,270 you can really focus on the structure of the web page 263 00:13:07,270 --> 00:13:11,180 and leave the style for the style section of the web page instead. 264 00:13:11,180 --> 00:13:14,260 So here we specified that H2s should be centered 265 00:13:14,260 --> 00:13:16,480 and should have a color of blue. 266 00:13:16,480 --> 00:13:20,620 And now if I refresh the page, it looks exactly the same. 267 00:13:20,620 --> 00:13:24,340 The subsections, which are my H2 elements, are colored blue. 268 00:13:24,340 --> 00:13:25,390 And they're centered. 269 00:13:25,390 --> 00:13:26,590 But now I factored it out. 270 00:13:26,590 --> 00:13:30,523 So it only shows up in one place at the beginning of my HTML file, which 271 00:13:30,523 --> 00:13:32,440 means that if I ever want to change something, 272 00:13:32,440 --> 00:13:34,930 if I ever want to align these on the right-hand side, 273 00:13:34,930 --> 00:13:38,230 for example, instead of in the center, or I want to change the color to red 274 00:13:38,230 --> 00:13:42,040 instead of blue, I can change it in one place, refresh, 275 00:13:42,040 --> 00:13:45,670 and then you'll see the change resulted on the web page that shows up when 276 00:13:45,670 --> 00:13:48,590 the user reloads the page, for example. 277 00:13:48,590 --> 00:13:51,070 And so this I would argue is a bit better design. 278 00:13:51,070 --> 00:13:53,560 I've been able to say that for every H2 element 279 00:13:53,560 --> 00:13:56,050 I would like to style it in a particular way. 280 00:13:56,050 --> 00:13:58,300 In this case, setting the text alignment to something, 281 00:13:58,300 --> 00:14:01,820 setting the color to something as well. 282 00:14:01,820 --> 00:14:05,480 What might happen, though, if I wanted to style all of the titles, not just 283 00:14:05,480 --> 00:14:08,540 the subsections, but also my big section heading at the top that 284 00:14:08,540 --> 00:14:10,490 says hello world, for example? 285 00:14:10,490 --> 00:14:12,330 How might I go about doing that? 286 00:14:12,330 --> 00:14:16,350 Well, let's say I want my H2s to be centered and I want them to be blue. 287 00:14:16,350 --> 00:14:20,170 But I also want hello world to be centered and blue as well. 288 00:14:20,170 --> 00:14:22,670 Well, you might imagine that one thing I definitely could do 289 00:14:22,670 --> 00:14:25,580 is go up into the style section of my web page 290 00:14:25,580 --> 00:14:28,850 and say that for every H1 element I'll go ahead 291 00:14:28,850 --> 00:14:33,590 and say that every H1 should be text aligned, to be centered, 292 00:14:33,590 --> 00:14:37,555 and every H1 should also have a color of blue. 293 00:14:37,555 --> 00:14:40,190 Where now if I go back and refresh the page, well, 294 00:14:40,190 --> 00:14:44,810 now my big H1 at the top of the page, in addition to my two H2 elements 295 00:14:44,810 --> 00:14:48,140 that are representing the subsections within this section, 296 00:14:48,140 --> 00:14:50,850 are all centered and blue as well. 297 00:14:50,850 --> 00:14:53,450 But here, again, we've fallen into the same trap. 298 00:14:53,450 --> 00:14:56,120 And if we look at the HTML file, we can see it. 299 00:14:56,120 --> 00:15:00,863 We've repeated the same styling code for both H1 and H2. 300 00:15:00,863 --> 00:15:02,780 For both of them, I've specified that we would 301 00:15:02,780 --> 00:15:04,490 like the text alignment to be centered. 302 00:15:04,490 --> 00:15:07,170 And for both of them, we want a color of blue. 303 00:15:07,170 --> 00:15:09,490 So how do we solve this problem? 304 00:15:09,490 --> 00:15:13,640 Well, CSS lets us solve this problem by giving HTML elements something 305 00:15:13,640 --> 00:15:15,200 called a class. 306 00:15:15,200 --> 00:15:19,220 And a class just describes a category of HTML elements 307 00:15:19,220 --> 00:15:21,830 that all should be styled a similar way. 308 00:15:21,830 --> 00:15:25,100 They don't all need to be H1s, they don't all need to be H2s. 309 00:15:25,100 --> 00:15:26,600 It could be any elements. 310 00:15:26,600 --> 00:15:29,780 But it's a way of giving a name to a particular category 311 00:15:29,780 --> 00:15:32,420 or class of elements such that they can be 312 00:15:32,420 --> 00:15:34,940 styled according to particular rules. 313 00:15:34,940 --> 00:15:36,470 Let's try this now. 314 00:15:36,470 --> 00:15:40,680 Here is the body of my web page where I have an H1 tag that says hello world. 315 00:15:40,680 --> 00:15:45,700 Two subsections that are H2s, underneath which are two paragraphs. 316 00:15:45,700 --> 00:15:51,640 I'm going to add to H1 a class that I'll set equal to any name that I'd like, 317 00:15:51,640 --> 00:15:54,970 some name that's going to describe the category of things 318 00:15:54,970 --> 00:15:56,530 that I would like to style. 319 00:15:56,530 --> 00:15:58,118 And I'll go ahead and call this title. 320 00:15:58,118 --> 00:16:00,160 But again, you could call it anything you'd like, 321 00:16:00,160 --> 00:16:03,810 some description that is going to describe what you want to style. 322 00:16:03,810 --> 00:16:07,540 And in addition to this H1 element having a class of title, 323 00:16:07,540 --> 00:16:11,680 I'd also like to give both of my H2s a class of title as well. 324 00:16:11,680 --> 00:16:14,990 325 00:16:14,990 --> 00:16:16,190 So why have I done this? 326 00:16:16,190 --> 00:16:17,660 What can I do now? 327 00:16:17,660 --> 00:16:21,020 Well, now if I scroll back up to the style section of my web page, 328 00:16:21,020 --> 00:16:23,540 instead of repeating the same code twice, 329 00:16:23,540 --> 00:16:27,160 I can instead say that I don't just want to style H2s 330 00:16:27,160 --> 00:16:30,260 to have a centered text alignment and a color of blue, 331 00:16:30,260 --> 00:16:33,410 but I want anything with a class of title 332 00:16:33,410 --> 00:16:35,710 to be styled in this particular way. 333 00:16:35,710 --> 00:16:41,900 And in CSS, the syntax for that, is to use the notation, dot, and then title. 334 00:16:41,900 --> 00:16:45,200 The dot signifies that the name of a class is coming next. 335 00:16:45,200 --> 00:16:48,950 And then title is the name of the class that I want to style. 336 00:16:48,950 --> 00:16:50,420 So what does this all mean? 337 00:16:50,420 --> 00:16:56,120 I've given three HTML elements a class name of title, the H1, and then 338 00:16:56,120 --> 00:16:57,740 both of the H2s. 339 00:16:57,740 --> 00:17:00,110 And then in the style section of my web page, 340 00:17:00,110 --> 00:17:02,870 I've specified that for any element that shows up 341 00:17:02,870 --> 00:17:06,680 in this web page that has a class of title, I want to go ahead 342 00:17:06,680 --> 00:17:10,530 and center it, and to also make its color blue. 343 00:17:10,530 --> 00:17:13,010 So if I go back here now and refresh the page, 344 00:17:13,010 --> 00:17:17,089 I see that the page looks exactly the same, but I haven't repeated myself. 345 00:17:17,089 --> 00:17:21,140 Now the big title at the top, as well as the titles for each of the subsections, 346 00:17:21,140 --> 00:17:23,260 show up centered and blue. 347 00:17:23,260 --> 00:17:25,250 And now of course the reason this is useful 348 00:17:25,250 --> 00:17:28,069 is not only because I'm just avoiding needing to copy/paste, 349 00:17:28,069 --> 00:17:30,740 but also it makes it easier to change the page if I ever want 350 00:17:30,740 --> 00:17:32,840 to change the styling in the future. 351 00:17:32,840 --> 00:17:36,170 If I ever wanted to change the color from blue to green, for example, 352 00:17:36,170 --> 00:17:38,110 I do that in one place. 353 00:17:38,110 --> 00:17:40,880 And I go back and refresh the page, and all of those titles 354 00:17:40,880 --> 00:17:44,000 have changed, the H1s and the H2s. 355 00:17:44,000 --> 00:17:46,820 If I decide I want to change the font, for example, 356 00:17:46,820 --> 00:17:51,540 which you can do by using something called the Font Family CSS property. 357 00:17:51,540 --> 00:17:55,250 And let me make this a Sans Serif font instead of a Serif font 358 00:17:55,250 --> 00:17:58,860 that have the little glyphs at the end of all the letters. 359 00:17:58,860 --> 00:18:00,980 I'll go back and refresh. 360 00:18:00,980 --> 00:18:03,810 And I've now been able to change the font of the headings 361 00:18:03,810 --> 00:18:09,180 as well, both the H1s and the H2s, all by saying that all of these titles 362 00:18:09,180 --> 00:18:11,470 are going to have a class name of title. 363 00:18:11,470 --> 00:18:14,580 And then specifying exactly how I want to style anything 364 00:18:14,580 --> 00:18:17,190 that has that particular class name. 365 00:18:17,190 --> 00:18:21,300 And it turns out that an HTML page doesn't need to have just one class. 366 00:18:21,300 --> 00:18:25,140 We can have many classes that describe categories of HTML elements 367 00:18:25,140 --> 00:18:27,540 that we would like to style in particular ways. 368 00:18:27,540 --> 00:18:31,020 Say, for example, that it's not the titles that we want to make green, 369 00:18:31,020 --> 00:18:33,840 but it's all of the text underneath the subsection headings 370 00:18:33,840 --> 00:18:35,840 that we would like to make green instead. 371 00:18:35,840 --> 00:18:37,950 I'll go back to index.html. 372 00:18:37,950 --> 00:18:41,250 And here I'll say that the only thing that I want to style titles as is I 373 00:18:41,250 --> 00:18:43,530 would like for the titles to be centered. 374 00:18:43,530 --> 00:18:47,040 And I'll create another class that will apply to the paragraphs. 375 00:18:47,040 --> 00:18:50,382 I'll give this paragraph a class name of-- 376 00:18:50,382 --> 00:18:53,340 I'll just call it green because it's a text that I want to color green, 377 00:18:53,340 --> 00:18:54,610 for example. 378 00:18:54,610 --> 00:18:58,540 And I'll give this paragraph a class of green as well. 379 00:18:58,540 --> 00:19:02,680 And now I'll specify that anything that has a class name of green I 380 00:19:02,680 --> 00:19:06,880 would like for the color to be green. 381 00:19:06,880 --> 00:19:10,870 Such that now if I go back and refresh the page, 382 00:19:10,870 --> 00:19:14,890 I see that the headings, the H1s and the H2s, are all centered. 383 00:19:14,890 --> 00:19:16,930 And the text is now green. 384 00:19:16,930 --> 00:19:21,220 And it turns out that HTML elements can have multiple classes as well. 385 00:19:21,220 --> 00:19:25,930 If I would like for my big title at the top, for instance, to be both centered 386 00:19:25,930 --> 00:19:29,770 and to have a color of green, I can give it multiple class names. 387 00:19:29,770 --> 00:19:33,280 I can say for this H1, I want to give it a class name of title. 388 00:19:33,280 --> 00:19:36,670 But I also wanted to have a class of green. 389 00:19:36,670 --> 00:19:39,280 So I space separate the two names of the classes-- 390 00:19:39,280 --> 00:19:41,180 title, space, green. 391 00:19:41,180 --> 00:19:44,430 And of course I'm using these names, but they could be called anything, again. 392 00:19:44,430 --> 00:19:47,380 And I'm just here specifying that for this particular HTML 393 00:19:47,380 --> 00:19:52,150 element, this H1 element, it should have two classes, a class of title 394 00:19:52,150 --> 00:19:53,500 and a class of green. 395 00:19:53,500 --> 00:19:57,220 The former meaning that it's going to be styled to be text aligned centered. 396 00:19:57,220 --> 00:20:00,250 And the latter meaning that we're going to color it green according 397 00:20:00,250 --> 00:20:04,690 to the rules that are defined here in the style section of my index.html 398 00:20:04,690 --> 00:20:05,950 file. 399 00:20:05,950 --> 00:20:08,780 If I go back to the page now and refresh the page, 400 00:20:08,780 --> 00:20:13,000 we now see that my title, the big H1 at the top, is now not only centered, 401 00:20:13,000 --> 00:20:17,320 because it has a class system of title, rather. 402 00:20:17,320 --> 00:20:20,840 But it's also green because it has a class name of green as well. 403 00:20:20,840 --> 00:20:25,330 So you can apply multiple of these CSS properties or class names 404 00:20:25,330 --> 00:20:28,360 to any particular HTML element. 405 00:20:28,360 --> 00:20:32,380 Of course, now our HTML file is starting to get a little bit long. 406 00:20:32,380 --> 00:20:34,330 We have a whole bunch of style information 407 00:20:34,330 --> 00:20:38,410 here between lines 8 and lines 18 of my HTML file. 408 00:20:38,410 --> 00:20:42,140 And then I have the body of the page that appears beneath that. 409 00:20:42,140 --> 00:20:46,000 So we might want to try and factor things out into separate files. 410 00:20:46,000 --> 00:20:50,920 And so this is yet another way that you can include CSS inside of an HTML page. 411 00:20:50,920 --> 00:20:54,130 You could use inline styling, which we saw at the very beginning 412 00:20:54,130 --> 00:20:56,740 where we added to an HTML element a style 413 00:20:56,740 --> 00:21:01,480 attribute that was equal to some sequence of CSS properties and values. 414 00:21:01,480 --> 00:21:05,080 We could also add a style section to the header of the page 415 00:21:05,080 --> 00:21:07,300 where we specified some style information. 416 00:21:07,300 --> 00:21:11,280 But we could also separate things into a different file altogether. 417 00:21:11,280 --> 00:21:15,730 I'll create a new file that I'm going to call style.css. 418 00:21:15,730 --> 00:21:18,220 And I'm going to take all of the style information 419 00:21:18,220 --> 00:21:21,930 that was originally in the style section of my HTML page, 420 00:21:21,930 --> 00:21:24,490 and I'm going to move it into styles.css. 421 00:21:24,490 --> 00:21:28,510 So now inside of styles.css, I've specified 422 00:21:28,510 --> 00:21:32,250 that anything that has a class name of title you should center. 423 00:21:32,250 --> 00:21:34,420 And anything that has a class name of green you 424 00:21:34,420 --> 00:21:37,330 should just color green, for example. 425 00:21:37,330 --> 00:21:39,550 So go back to index.html here. 426 00:21:39,550 --> 00:21:42,950 And I'll remove this styling code from the page. 427 00:21:42,950 --> 00:21:46,960 And instead, I'm going to add a section to the header information of my web 428 00:21:46,960 --> 00:21:49,420 page, recalling again that the header is just where I'm 429 00:21:49,420 --> 00:21:52,480 storing other data about the page that my browser will 430 00:21:52,480 --> 00:21:54,540 need to know in order to render it. 431 00:21:54,540 --> 00:21:58,990 And I'll add a tag called a link tag, which will let me link this HTML 432 00:21:58,990 --> 00:22:02,558 file to another file, for example. 433 00:22:02,558 --> 00:22:04,350 The relationship it's going to have is it's 434 00:22:04,350 --> 00:22:06,970 going to have a relationship of style sheet, 435 00:22:06,970 --> 00:22:09,390 meaning that the file I'm about to link is going 436 00:22:09,390 --> 00:22:11,880 to be a style sheet for this page. 437 00:22:11,880 --> 00:22:17,220 And then I'll specify HREF equals styles.css, 438 00:22:17,220 --> 00:22:20,490 meaning I would like to link the styles.css file. 439 00:22:20,490 --> 00:22:25,110 And that should be the style sheet for this file, index.html. 440 00:22:25,110 --> 00:22:28,920 So now if I go to this page, reload the page, 441 00:22:28,920 --> 00:22:31,650 I see that again everything looks exactly the same. 442 00:22:31,650 --> 00:22:34,040 But I've simplified my HTML page a little bit. 443 00:22:34,040 --> 00:22:38,250 There is no longer any actual CSS code inside of index.html. 444 00:22:38,250 --> 00:22:40,620 I've just specified up here on line 8 that 445 00:22:40,620 --> 00:22:43,080 to get the style information for this page, 446 00:22:43,080 --> 00:22:46,530 you should look in a file called styles.css. 447 00:22:46,530 --> 00:22:48,060 Why is this advantageous? 448 00:22:48,060 --> 00:22:51,840 Well, for one, you might imagine that oftentimes if you're running a website, 449 00:22:51,840 --> 00:22:54,720 you might have multiple different pages on that website 450 00:22:54,720 --> 00:22:57,090 that all need to be styled in similar ways. 451 00:22:57,090 --> 00:22:59,730 Maybe the banner along the top is going to be the same color. 452 00:22:59,730 --> 00:23:03,000 Maybe you want to use consistent fonts throughout all your web pages. 453 00:23:03,000 --> 00:23:06,420 And so in that case, it would be pretty tedious and repetitive to have 454 00:23:06,420 --> 00:23:11,790 to repeat the exact same CSS code across all of your different HTML pages. 455 00:23:11,790 --> 00:23:17,160 By factoring things out into a .css file, we could just add this one line, 456 00:23:17,160 --> 00:23:23,370 this linking of styles.css into this HTML page into all of the HTML pages 457 00:23:23,370 --> 00:23:27,000 that we're later going to use, which will have the effect of making sure 458 00:23:27,000 --> 00:23:31,670 that we can write CSS once and have it used in a whole bunch of other HTML 459 00:23:31,670 --> 00:23:32,610 files. 460 00:23:32,610 --> 00:23:36,270 And conversely, right now, inside of index.html, 461 00:23:36,270 --> 00:23:39,120 we're including a single CSS file, styles.css. 462 00:23:39,120 --> 00:23:43,140 But you could easily imagine that if we had multiple different CSS files that 463 00:23:43,140 --> 00:23:46,770 were describing styles for different parts of a much larger web page, 464 00:23:46,770 --> 00:23:50,220 we could include as by linking multiple different CSS 465 00:23:50,220 --> 00:23:53,760 files here inside of the same HTML page to apply 466 00:23:53,760 --> 00:23:57,720 a whole variety of different styles to all of the elements that show up 467 00:23:57,720 --> 00:23:59,610 in this web page. 468 00:23:59,610 --> 00:24:02,580 Let's take a look at some examples of other CSS properties 469 00:24:02,580 --> 00:24:04,110 that we might want to apply. 470 00:24:04,110 --> 00:24:06,330 Recall back when we were talking about HTML, 471 00:24:06,330 --> 00:24:08,640 we saw that we could use HTML in order to create 472 00:24:08,640 --> 00:24:11,100 tables of data, rows and columns. 473 00:24:11,100 --> 00:24:13,930 But those tables look pretty simplistic. 474 00:24:13,930 --> 00:24:15,790 Let's try and recreate one of them now. 475 00:24:15,790 --> 00:24:19,320 I'll go ahead and remove styles.css from index.html. 476 00:24:19,320 --> 00:24:22,000 And inside the body, I'll have a table. 477 00:24:22,000 --> 00:24:26,190 Recall that inside of a table, I can use the TR element to create rows. 478 00:24:26,190 --> 00:24:31,620 And let me create for myself a couple of cells using TD elements for table data. 479 00:24:31,620 --> 00:24:35,313 I'll create cell 1, cell 2, and cell 3. 480 00:24:35,313 --> 00:24:37,230 And I'll go ahead and repeat this row a couple 481 00:24:37,230 --> 00:24:40,620 of times to give myself maybe three rows worth of data. 482 00:24:40,620 --> 00:24:47,340 I'll change the number in cell 4, cell 4, cell 6, cell 7, cell 8, and cell 9. 483 00:24:47,340 --> 00:24:51,000 So what I have here is a table inside of which are three rows. 484 00:24:51,000 --> 00:24:53,960 And every row has within it three cells where 485 00:24:53,960 --> 00:24:56,370 I might be storing some table data. 486 00:24:56,370 --> 00:24:58,080 I'll go back here and refresh the page. 487 00:24:58,080 --> 00:25:00,060 And we'll see that we now have a table. 488 00:25:00,060 --> 00:25:04,230 Insofar as it is three rows, each row containing three cells, 489 00:25:04,230 --> 00:25:06,120 but it's not particularly well-styled. 490 00:25:06,120 --> 00:25:08,400 So how might we like to style this web page 491 00:25:08,400 --> 00:25:10,920 to make it look a little more aesthetically pleasing? 492 00:25:10,920 --> 00:25:13,980 Well, for one, you might imagine that this whole table should probably 493 00:25:13,980 --> 00:25:16,120 have a border around it. 494 00:25:16,120 --> 00:25:17,732 So how do we do that? 495 00:25:17,732 --> 00:25:20,690 Well, it turns out that we can go up to the header section of the page. 496 00:25:20,690 --> 00:25:24,420 We'll go ahead and add a style section back to this HTML page. 497 00:25:24,420 --> 00:25:28,380 And I'll say, for all of the table elements that show up on this page, 498 00:25:28,380 --> 00:25:30,340 let me give it a particular border. 499 00:25:30,340 --> 00:25:32,340 And in this case, I'll specify I want the border 500 00:25:32,340 --> 00:25:37,410 to be a one-pixel solid black border. 501 00:25:37,410 --> 00:25:41,190 I could have specified something else, like a five-pixel dotted blue border. 502 00:25:41,190 --> 00:25:45,500 But one-pixel solid black border is the border I'd like for now. 503 00:25:45,500 --> 00:25:47,950 I'll go back here, refresh the page. 504 00:25:47,950 --> 00:25:51,250 And I have a one-pixel solid black border 505 00:25:51,250 --> 00:25:53,500 that surrounds this entire table. 506 00:25:53,500 --> 00:25:55,330 What else might I like to add to this? 507 00:25:55,330 --> 00:25:58,510 Well, maybe I don't just want a border to be around the whole table, 508 00:25:58,510 --> 00:26:03,080 but I'd like for every individual cell to have a border around it as well. 509 00:26:03,080 --> 00:26:05,720 So how might I go about doing that? 510 00:26:05,720 --> 00:26:08,710 We'll go ahead, and instead of styling the table, 511 00:26:08,710 --> 00:26:11,680 I want to style the individual table data cells 512 00:26:11,680 --> 00:26:13,630 that show up inside of that table. 513 00:26:13,630 --> 00:26:18,250 And recall that the tag for that is TD, TD for table data. 514 00:26:18,250 --> 00:26:21,070 And here I'd like to specify that for the table data, 515 00:26:21,070 --> 00:26:27,740 I'd also like to give it a border of one-pixel solid black. 516 00:26:27,740 --> 00:26:29,880 I'll go back to the page and refresh it. 517 00:26:29,880 --> 00:26:34,040 And now I have one big border around the entire table. 518 00:26:34,040 --> 00:26:37,130 And now around each of the cells, I have a smaller border 519 00:26:37,130 --> 00:26:39,320 that goes around that individual cell. 520 00:26:39,320 --> 00:26:41,600 Now it might be slightly annoying that right now when 521 00:26:41,600 --> 00:26:44,270 two cells are next to each other they each have borders. 522 00:26:44,270 --> 00:26:48,260 So effectively I have a double border between many of these cells right now. 523 00:26:48,260 --> 00:26:49,830 I could collapse those borders. 524 00:26:49,830 --> 00:26:51,830 And you'd only know how to do this by looking up 525 00:26:51,830 --> 00:26:55,910 online as to what the documentation is for how to collapse borders. 526 00:26:55,910 --> 00:26:59,450 But it turns out that tables have an additional CSS property that you 527 00:26:59,450 --> 00:27:02,810 can add to them called border collapse. 528 00:27:02,810 --> 00:27:05,810 And if I say border collapse is collapse, then 529 00:27:05,810 --> 00:27:08,450 the result of that is going to be that rather than have 530 00:27:08,450 --> 00:27:11,240 these doubled-up borders that show up inside of my table, 531 00:27:11,240 --> 00:27:14,060 when I refresh the page, all the borders collapse. 532 00:27:14,060 --> 00:27:17,180 So I just have a single one-pixel solid black border 533 00:27:17,180 --> 00:27:20,540 that surrounds all of the cells and surrounds the table. 534 00:27:20,540 --> 00:27:23,860 So this just goes to show there are many, many CSS properties 535 00:27:23,860 --> 00:27:24,770 that you could apply. 536 00:27:24,770 --> 00:27:28,250 And we've only looked at a small number of them over the course of today. 537 00:27:28,250 --> 00:27:31,130 But you're definitely welcome to take a look at other CSS properties 538 00:27:31,130 --> 00:27:33,320 that exist to look at how else you might be 539 00:27:33,320 --> 00:27:35,870 able to style your HTML elements to get them 540 00:27:35,870 --> 00:27:38,300 to look the way you want them to look. 541 00:27:38,300 --> 00:27:41,840 In this case, what else might we want to do to this particular table? 542 00:27:41,840 --> 00:27:45,200 Well, right now everything does seem to be a little bit jammed packed together. 543 00:27:45,200 --> 00:27:48,320 There isn't a whole lot of space that shows up between these table cells, 544 00:27:48,320 --> 00:27:49,370 for example. 545 00:27:49,370 --> 00:27:53,460 So I might like to say, for each of these individual table data cells, 546 00:27:53,460 --> 00:27:55,400 I'd like to give them a little bit of padding, 547 00:27:55,400 --> 00:27:59,250 a little bit of space, that separates that cell from other cell information, 548 00:27:59,250 --> 00:28:00,510 for example. 549 00:28:00,510 --> 00:28:04,520 And so to do that, it turns out there is a CSS property called padding. 550 00:28:04,520 --> 00:28:07,790 And for every table data cell, I'll add some styling. 551 00:28:07,790 --> 00:28:10,790 I'll say, I'd like for there to be padding-- 552 00:28:10,790 --> 00:28:14,880 let's say five pixels' worth of padding around table data cells. 553 00:28:14,880 --> 00:28:16,010 So I'll do that. 554 00:28:16,010 --> 00:28:17,570 Refresh the page. 555 00:28:17,570 --> 00:28:20,660 And now the cells are a little more spaced apart from each other. 556 00:28:20,660 --> 00:28:22,302 Looks a little bit better. 557 00:28:22,302 --> 00:28:23,510 What else might I want to do? 558 00:28:23,510 --> 00:28:27,950 Well, maybe these top three cells at the very top, the cell 1, cell 2, cell 3, 559 00:28:27,950 --> 00:28:31,310 maybe I'd like for that row to have a slightly different background 560 00:28:31,310 --> 00:28:34,550 color because maybe these are going to be the header cells of a table, 561 00:28:34,550 --> 00:28:35,270 for example. 562 00:28:35,270 --> 00:28:39,180 So I'd like for their background color to be blue, for example. 563 00:28:39,180 --> 00:28:41,010 How might I go about doing that? 564 00:28:41,010 --> 00:28:42,980 Well, I could try to add-- 565 00:28:42,980 --> 00:28:45,920 for these table data cells, I'd like for it to have a background 566 00:28:45,920 --> 00:28:49,370 color of blue, for instance. 567 00:28:49,370 --> 00:28:51,050 And then refresh the page. 568 00:28:51,050 --> 00:28:52,310 But that didn't quite work. 569 00:28:52,310 --> 00:28:55,470 Rather than just changing the styling of the top three cells, 570 00:28:55,470 --> 00:28:58,040 I've changed the styling of all nine of the cells that 571 00:28:58,040 --> 00:29:02,000 show up here because I've specified for every table data cell 572 00:29:02,000 --> 00:29:05,150 go ahead and give it a background color of blue. 573 00:29:05,150 --> 00:29:06,810 How can I solve this problem? 574 00:29:06,810 --> 00:29:11,450 Well, we can solve this problem by taking advantage of CSS classes again. 575 00:29:11,450 --> 00:29:19,190 Maybe for this particular table row, I'll give it a class called header. 576 00:29:19,190 --> 00:29:23,540 And then I'll say that for anything that has a class of header, 577 00:29:23,540 --> 00:29:28,250 again, using the dot notation to mean I'm introducing a CSS class here, 578 00:29:28,250 --> 00:29:33,870 I would like to give all of those things a background color of blue. 579 00:29:33,870 --> 00:29:37,400 So I've applied the header class to just the first row 580 00:29:37,400 --> 00:29:42,350 of the table, the row that has cell 1, then cell 2, then cell 3. 581 00:29:42,350 --> 00:29:46,250 And then on lines 21 through 24 here, I specify that just 582 00:29:46,250 --> 00:29:48,600 for the things that have a class of header, 583 00:29:48,600 --> 00:29:52,460 go ahead and give those a background color of blue. 584 00:29:52,460 --> 00:29:55,110 I'll go back here, refresh the page. 585 00:29:55,110 --> 00:29:58,490 And now only cell 1, cell 2, and cell 3, those all 586 00:29:58,490 --> 00:30:02,150 have a background color of blue instead. 587 00:30:02,150 --> 00:30:05,090 Now it turns out that CSS actually has some additional ways 588 00:30:05,090 --> 00:30:06,380 that you can do this idea. 589 00:30:06,380 --> 00:30:10,202 In HTML, if you have a road that is going to be a header row, 590 00:30:10,202 --> 00:30:13,520 oftentimes instead of calling them TD for table data, 591 00:30:13,520 --> 00:30:18,110 there's another HTML element you can use instead called TH for table header, 592 00:30:18,110 --> 00:30:19,410 for example. 593 00:30:19,410 --> 00:30:25,860 So if I replace all of these TDs with THs, 594 00:30:25,860 --> 00:30:30,990 and then I can specify that for all of the table header cells, 595 00:30:30,990 --> 00:30:34,270 I would like to give those a background color of blue. 596 00:30:34,270 --> 00:30:36,720 Now if I go back to the page and refresh it, 597 00:30:36,720 --> 00:30:41,070 you'll see that I have cell 1, cell 2, and cell 3 as table header cells 598 00:30:41,070 --> 00:30:43,650 that all have a background color of blue as well. 599 00:30:43,650 --> 00:30:46,860 So you can mix and match, adding new HTML elements. 600 00:30:46,860 --> 00:30:49,230 And then using CSS to determine how it is you 601 00:30:49,230 --> 00:30:52,320 would like to style those elements in particular ways. 602 00:30:52,320 --> 00:30:55,050 And you can keep playing around with this, adding more style, 603 00:30:55,050 --> 00:30:56,820 changing the spacing, changing the border, 604 00:30:56,820 --> 00:30:58,980 changing the font, to try and get things to look 605 00:30:58,980 --> 00:31:03,220 a little bit more professional, a little more Web 2.0, as you might call it. 606 00:31:03,220 --> 00:31:05,400 But it turns out that we might do this so often 607 00:31:05,400 --> 00:31:08,430 and spend so much time trying to just get the styles to look right, 608 00:31:08,430 --> 00:31:12,330 that many people have already written what you might call CSS libraries, 609 00:31:12,330 --> 00:31:15,180 collections of CSS properties and values that 610 00:31:15,180 --> 00:31:19,390 just make it easy to style a website very quickly and make it look good. 611 00:31:19,390 --> 00:31:21,870 And one of the most popular of these CSS libraries 612 00:31:21,870 --> 00:31:23,820 is a library called Bootstrap. 613 00:31:23,820 --> 00:31:28,440 Bootstrap is a CSS library that just includes a whole bunch of CSS code 614 00:31:28,440 --> 00:31:32,370 that you can apply to your HTML pages to make them look a little bit better, 615 00:31:32,370 --> 00:31:33,750 just to begin with. 616 00:31:33,750 --> 00:31:35,010 How do you use it? 617 00:31:35,010 --> 00:31:42,190 Well, if we go to getbootstrap.com, and I'll go to Documentation, 618 00:31:42,190 --> 00:31:45,500 and scroll down a little bit, under the Quick Start section, 619 00:31:45,500 --> 00:31:47,560 you'll notice that here it's just a line of code 620 00:31:47,560 --> 00:31:50,950 that you can copy/paste into your own HTML file 621 00:31:50,950 --> 00:31:54,280 to add Bootstrap to that particular HTML page. 622 00:31:54,280 --> 00:31:56,410 It looks very similar to what we've seen before. 623 00:31:56,410 --> 00:31:59,380 It's a link tag, rel equals style sheet, meaning 624 00:31:59,380 --> 00:32:02,980 we're going to link a CSS style sheet into our HTML page. 625 00:32:02,980 --> 00:32:06,010 But instead of the hyperlink reference, the HREF 626 00:32:06,010 --> 00:32:09,760 being the name of styles.css or some other local CSS 627 00:32:09,760 --> 00:32:13,060 file that we've stored inside of CS50 IDE, 628 00:32:13,060 --> 00:32:18,020 instead it's going to be a URL to Bootstrap's own CSS files. 629 00:32:18,020 --> 00:32:21,080 So I'll go ahead and take the slide, copy it. 630 00:32:21,080 --> 00:32:26,580 And then in my CS50 IDE, I'll get rid of the style section of my web page. 631 00:32:26,580 --> 00:32:30,460 And I'll just go ahead and add Bootstrap's CSS 632 00:32:30,460 --> 00:32:34,840 by copying in that line of code into the header section of my web page. 633 00:32:34,840 --> 00:32:41,630 And now, inside of body, I'll just create a H1 that says, hello world. 634 00:32:41,630 --> 00:32:43,660 A simple page that we've already seen before, 635 00:32:43,660 --> 00:32:47,890 but now with the difference that over here on line 8 I've added in Bootstrap 636 00:32:47,890 --> 00:32:50,650 CSS into this web page. 637 00:32:50,650 --> 00:32:53,080 What is it going to look like now if I load the web page 638 00:32:53,080 --> 00:32:54,250 and take a look at it? 639 00:32:54,250 --> 00:32:55,270 Let's see. 640 00:32:55,270 --> 00:32:58,290 I'll go back, I'll refresh the page. 641 00:32:58,290 --> 00:33:02,020 And you'll notice that Bootstrap has chosen slightly different fonts, 642 00:33:02,020 --> 00:33:03,910 it's chosen slightly different sizes. 643 00:33:03,910 --> 00:33:06,490 Already things look a little bit different. 644 00:33:06,490 --> 00:33:08,810 So how can I continue to take advantage of the features 645 00:33:08,810 --> 00:33:10,420 that Bootstrap has to offer? 646 00:33:10,420 --> 00:33:12,610 Well, let's go back to get bootstrap.com. 647 00:33:12,610 --> 00:33:15,510 And we'll go to the Documentation section of the page. 648 00:33:15,510 --> 00:33:17,620 And then along the left-hand menu bar, you'll 649 00:33:17,620 --> 00:33:19,900 notice a button that says Components. 650 00:33:19,900 --> 00:33:21,790 When you click on Components, you'll be taken 651 00:33:21,790 --> 00:33:25,420 to all of these different components or parts of an HTML page 652 00:33:25,420 --> 00:33:27,940 that you can add that Bootstrap has already styled 653 00:33:27,940 --> 00:33:31,150 for us using Bootstrap's own CSS code. 654 00:33:31,150 --> 00:33:33,730 And the first one alphabetically is alerts. 655 00:33:33,730 --> 00:33:37,450 So you might imagine that you want your web page to display some sort of alert 656 00:33:37,450 --> 00:33:38,890 to the user who is on it. 657 00:33:38,890 --> 00:33:41,440 And let's scroll down and see what these alerts look like. 658 00:33:41,440 --> 00:33:43,982 Here's a simple-- what they're calling a primary alert, which 659 00:33:43,982 --> 00:33:45,073 has a background of blue. 660 00:33:45,073 --> 00:33:46,990 There's a danger alert, which has a background 661 00:33:46,990 --> 00:33:48,760 of red, which might be quite common. 662 00:33:48,760 --> 00:33:51,430 A warning alert that has the background of yellow. 663 00:33:51,430 --> 00:33:53,350 So how do I actually take one of these alerts 664 00:33:53,350 --> 00:33:55,165 and actually put it into my page? 665 00:33:55,165 --> 00:33:57,180 Well, let's scroll down. 666 00:33:57,180 --> 00:33:59,020 And here's some sample code. 667 00:33:59,020 --> 00:34:00,940 Here is a div element. 668 00:34:00,940 --> 00:34:04,630 And a div HTML element is just an HTML element 669 00:34:04,630 --> 00:34:07,670 that's going to describe some vertical section of your code. 670 00:34:07,670 --> 00:34:11,380 You can think of a div as just a section of your web page. 671 00:34:11,380 --> 00:34:13,179 And we're giving it some classes. 672 00:34:13,179 --> 00:34:18,295 We're giving it a class of alert and a class of alert-primary. 673 00:34:18,295 --> 00:34:20,170 And what that's going to do is it's giving it 674 00:34:20,170 --> 00:34:22,540 two classes that Bootstrap knows about. 675 00:34:22,540 --> 00:34:25,840 And Bootstrap's own CSS presumably says that anything 676 00:34:25,840 --> 00:34:29,679 that has a class of alert and anything that has a class of alert-primary 677 00:34:29,679 --> 00:34:32,360 should be styled in these particular ways. 678 00:34:32,360 --> 00:34:39,070 So let me just copy this code and paste it into my HTML page. 679 00:34:39,070 --> 00:34:40,781 I'll go ahead and add some tabs. 680 00:34:40,781 --> 00:34:42,989 That will just make things look a little bit cleaner. 681 00:34:42,989 --> 00:34:46,350 HTML doesn't technically care whether you indent everything. 682 00:34:46,350 --> 00:34:49,350 But because HTML is so hierarchical, it can often 683 00:34:49,350 --> 00:34:53,130 be good design and good style just to look at everything nested and indented 684 00:34:53,130 --> 00:34:56,580 properly so that you can get a visual sense for what elements are nested 685 00:34:56,580 --> 00:34:58,840 within other elements, for example. 686 00:34:58,840 --> 00:35:02,820 And so here, I've added a div that has a class of alert and alert-primary. 687 00:35:02,820 --> 00:35:04,770 And role equals alert just tells the browser 688 00:35:04,770 --> 00:35:06,990 that this div is going to be an alert. 689 00:35:06,990 --> 00:35:10,410 And then here is the content of that actual alert. 690 00:35:10,410 --> 00:35:15,760 So I might replace it by saying, this is my alert, for example. 691 00:35:15,760 --> 00:35:19,880 And now if I go back to index.html and refresh the web page, 692 00:35:19,880 --> 00:35:23,240 I see not just this big H1 at the top, but also 693 00:35:23,240 --> 00:35:27,080 this is my alert that appears with a blue background styled already 694 00:35:27,080 --> 00:35:30,890 with a particular font chosen by Bootstrap immediately beneath that. 695 00:35:30,890 --> 00:35:32,810 And so you can look at Bootstrap's components 696 00:35:32,810 --> 00:35:36,320 that it offers on its website to look at a whole bunch of CSS elements 697 00:35:36,320 --> 00:35:39,470 that you can add to your web page without needing to worry about making 698 00:35:39,470 --> 00:35:41,512 sure the colors are exactly right and making sure 699 00:35:41,512 --> 00:35:44,360 the fonts are exactly right, because someone else has already 700 00:35:44,360 --> 00:35:47,780 done the work of figuring out what combinations of colors and CSS 701 00:35:47,780 --> 00:35:48,980 properties look good. 702 00:35:48,980 --> 00:35:52,520 And they have just given it to us in the form of a CSS library 703 00:35:52,520 --> 00:35:57,050 that we can take advantage of just by adding some classes to our HTML 704 00:35:57,050 --> 00:36:01,625 elements in order to create a better styled web page. 705 00:36:01,625 --> 00:36:03,500 So we've now seen a variety of different ways 706 00:36:03,500 --> 00:36:05,840 that we can add styling to our web page. 707 00:36:05,840 --> 00:36:08,840 We can use inline styling by adding a style attribute 708 00:36:08,840 --> 00:36:13,190 to any of our HTML elements to specify how we would like to style that page. 709 00:36:13,190 --> 00:36:17,210 We can put a style section into the header part of our index.html page, 710 00:36:17,210 --> 00:36:19,970 or any other HTML page to specify how we would 711 00:36:19,970 --> 00:36:25,430 like to style particular HTML elements or particular classes of HTML elements. 712 00:36:25,430 --> 00:36:30,110 And we also saw how you can actually create a .css file to link in a style 713 00:36:30,110 --> 00:36:33,140 sheet that either you have created or that, in the case of Bootstrap, 714 00:36:33,140 --> 00:36:35,300 for example, someone else has created. 715 00:36:35,300 --> 00:36:38,570 But all of this is using CSS, Cascading Style Sheets, 716 00:36:38,570 --> 00:36:42,920 this language of specifying properties of CSS, things like text alignment 717 00:36:42,920 --> 00:36:45,830 and color and font families and borders, as well as 718 00:36:45,830 --> 00:36:48,080 values that should correspond to them, in order 719 00:36:48,080 --> 00:36:51,530 to determine how a particular HTML element should work. 720 00:36:51,530 --> 00:36:54,740 And using CSS in combination with HTML, you now 721 00:36:54,740 --> 00:36:59,500 should have the ability to take a page and style it however you like. 722 00:36:59,500 --> 00:37:00,000