1 00:00:00,767 --> 00:00:01,345 - [Voiceover] We've now learned how 2 00:00:01,345 --> 00:00:03,074 to make a pretty complete web page 3 00:00:03,074 --> 00:00:05,440 with all sorts of marked up texts and images 4 00:00:05,440 --> 00:00:08,045 but it's lacking something, style. 5 00:00:08,045 --> 00:00:09,403 My web page here looks the same 6 00:00:09,403 --> 00:00:10,943 as the webpages you've been making. 7 00:00:10,943 --> 00:00:13,774 Black text, white background, same font, 8 00:00:13,774 --> 00:00:15,876 everything laid out from top to bottom. 9 00:00:15,876 --> 00:00:17,276 You've been on the web and you've seen 10 00:00:17,276 --> 00:00:20,308 that web pages can look very different from each other. 11 00:00:20,308 --> 00:00:21,833 Look around on Khan Academy at 12 00:00:21,833 --> 00:00:24,735 all the different colors and fonts and sizes. 13 00:00:24,735 --> 00:00:28,031 In fact, let's do this now, pause this talk through 14 00:00:28,031 --> 00:00:29,911 and look at a few different websites. 15 00:00:29,911 --> 00:00:31,543 What's different about each of them? 16 00:00:31,543 --> 00:00:35,066 What do you like or dislike about their style? 17 00:00:35,066 --> 00:00:37,240 I'll just wait right here. 18 00:00:38,148 --> 00:00:40,907 It's important to see how different web pages can be 19 00:00:40,907 --> 00:00:42,914 because pretty soon you'll figure out how 20 00:00:42,914 --> 00:00:44,743 to make you web pages look different 21 00:00:44,743 --> 00:00:45,776 and you wanna do that in a way 22 00:00:45,776 --> 00:00:48,537 that makes you happy because it represents you 23 00:00:48,537 --> 00:00:51,211 but it also makes other users happy too. 24 00:00:51,211 --> 00:00:52,942 With this all our web pages we need 25 00:00:52,942 --> 00:00:55,609 to learn a whole new language CSS 26 00:00:55,609 --> 00:00:57,897 that stands for Cascading Style Sheets 27 00:00:57,897 --> 00:00:59,746 and it's a way of defining styles that will apply 28 00:00:59,746 --> 00:01:01,877 to different parts of our web page. 29 00:01:01,877 --> 00:01:06,373 We embed CSS inside of HTML but it isn't actually HTML 30 00:01:06,373 --> 00:01:08,045 so we have to learn a whole new language 31 00:01:08,045 --> 00:01:11,211 and try not to confuse HTML with CSS. 32 00:01:11,211 --> 00:01:13,375 We'll see how we can use CSS to style all sorts 33 00:01:13,375 --> 00:01:15,278 of aspects of our web page like the font, 34 00:01:15,278 --> 00:01:17,434 sizes and layouts but we'll start 35 00:01:17,434 --> 00:01:19,579 with something that's pretty fun. 36 00:01:19,579 --> 00:01:22,107 Color, how about we change some headings 37 00:01:22,107 --> 00:01:25,409 on our web page to a nice grassy green. 38 00:01:25,409 --> 00:01:28,407 To start, we need to add a style tag 39 00:01:28,407 --> 00:01:30,408 to the head of our page. 40 00:01:31,900 --> 00:01:33,504 When the browser sees that, it will think, 41 00:01:33,504 --> 00:01:37,371 "Okay, everything inside here is CSS. 42 00:01:37,371 --> 00:01:40,102 "I'll use my CSS parser to understand it 43 00:01:40,102 --> 00:01:42,802 "instead of my HTML parser." 44 00:01:43,469 --> 00:01:48,410 Inside here, we'll add a CSS style rule. 45 00:01:48,410 --> 00:01:50,441 A style rule has a selector which tells 46 00:01:50,441 --> 00:01:51,666 a browser what part of a web page 47 00:01:51,666 --> 00:01:54,177 to style and declarations, which tell 48 00:01:54,177 --> 00:01:56,938 the browser how to style their part. 49 00:01:56,938 --> 00:02:00,276 If we want to style all the h2s on our page, 50 00:02:00,276 --> 00:02:05,276 we'll type the selector h2 and then we'll do curly braces. 51 00:02:06,082 --> 00:02:07,533 Make sure they're curly, not square 52 00:02:07,533 --> 00:02:10,133 or round those won't work. 53 00:02:10,133 --> 00:02:12,812 Inside, we'll put our declarations 54 00:02:12,812 --> 00:02:14,711 which have properties and values. 55 00:02:14,711 --> 00:02:18,673 To change the text color, we use the color property 56 00:02:19,307 --> 00:02:22,904 then we put a colon and now we need to come up with a value. 57 00:02:22,904 --> 00:02:25,774 We need to tell the browser what color we're interested in. 58 00:02:25,774 --> 00:02:28,242 Well we could just write green and it would 59 00:02:29,500 --> 00:02:32,166 understand it because green's a common color 60 00:02:32,166 --> 00:02:33,928 but that's not the green I wanted. 61 00:02:33,928 --> 00:02:35,912 I want a grassy green. 62 00:02:35,912 --> 00:02:39,547 If I write grassy green, uh oh. 63 00:02:39,547 --> 00:02:41,912 Now the browser gets confused and makes 64 00:02:41,912 --> 00:02:43,707 the headings black again because 65 00:02:43,707 --> 00:02:45,707 it's never heard of grassy green. 66 00:02:45,707 --> 00:02:48,344 If we want to be able to specify any color at all, 67 00:02:48,344 --> 00:02:51,714 then we need to use something called the RGB Spectrum 68 00:02:51,714 --> 00:02:54,180 which maybe you've heard about in art class. 69 00:02:54,180 --> 00:02:56,067 You don't need to be an expert in it though 70 00:02:56,067 --> 00:02:58,936 because we have an RGB color picker for you here. 71 00:02:58,936 --> 00:03:03,936 To use it, just replace this with RGB parentheses 72 00:03:04,069 --> 00:03:06,120 and a color picker will pop up. 73 00:03:06,120 --> 00:03:08,146 You can move your mouse inside of it 74 00:03:08,146 --> 00:03:10,533 and pick a color and you can see the color update 75 00:03:10,533 --> 00:03:14,579 in real-time and when you're happy click. 76 00:03:14,935 --> 00:03:17,010 Now do you notice how there were three numbers 77 00:03:17,010 --> 00:03:20,412 that it changed in our RGB parentheses? 78 00:03:20,412 --> 00:03:22,939 That's the red, green and blue 79 00:03:22,939 --> 00:03:25,867 components that make up that color. 80 00:03:26,502 --> 00:03:29,981 Okay, the neat thing about this CSS selector h2 81 00:03:29,981 --> 00:03:33,911 that we used is that selects all the h2s on the page 82 00:03:33,911 --> 00:03:35,866 so we can change multiple headlines 83 00:03:35,866 --> 00:03:39,189 because we want all of those h2s to be green. 84 00:03:39,189 --> 00:03:43,444 It's consistent for all those h2s it finds on the page. 85 00:03:43,444 --> 00:03:45,113 If you keep going with CSS, you can learn 86 00:03:45,113 --> 00:03:47,536 about many other ways of selecting parts of a page 87 00:03:47,536 --> 00:03:50,139 like if you wanted one of those h2s. 88 00:03:50,139 --> 00:03:54,078 You can go pretty far with these tag based selectors. 89 00:03:54,574 --> 00:03:56,400 Let's add another CSS style rule. 90 00:03:56,400 --> 00:03:59,210 This time to make the background a sky blue. 91 00:03:59,210 --> 00:04:02,077 How would we color the background on a page? 92 00:04:02,077 --> 00:04:05,870 Well, which tag encompasses the whole page, 93 00:04:05,870 --> 00:04:08,808 it's not the h1s, it's not the p, 94 00:04:08,808 --> 00:04:11,762 it's not the image, it's the body tag. 95 00:04:11,762 --> 00:04:14,412 Remember, everything visible is always 96 00:04:14,412 --> 00:04:16,481 inside that body tag. 97 00:04:16,481 --> 00:04:18,630 If we want to style the entire the page, 98 00:04:18,630 --> 00:04:22,262 we need to use a selector to select that tag. 99 00:04:22,710 --> 00:04:24,534 So we'll write body. 100 00:04:26,764 --> 00:04:29,659 Now, instead of color, we'll write background 101 00:04:29,659 --> 00:04:32,442 color, colon 102 00:04:33,318 --> 00:04:36,245 and then rgb parentheses. 103 00:04:36,491 --> 00:04:39,803 We get our color gripper and I'll pop it up 104 00:04:39,803 --> 00:04:41,933 and pick a blue that makes me think 105 00:04:41,933 --> 00:04:45,703 of frolicking bunnies and cumulus clouds. 106 00:04:45,703 --> 00:04:48,944 Ta da, look at my stylish page. 107 00:04:49,480 --> 00:04:51,637 There are hundreds more CSS properties 108 00:04:51,637 --> 00:04:54,243 besides color and background color 109 00:04:54,243 --> 00:04:56,907 but those ones are fun to get started with. 110 00:04:56,907 --> 00:04:59,321 In fact, after I'm done talking, play around 111 00:04:59,321 --> 00:05:01,544 with the colors I picked and customize this page 112 00:05:01,544 --> 00:05:05,166 to be more your style than mine, okay? 113 00:05:05,166 --> 00:05:06,534 Go.