WEBVTT 00:00:00.767 --> 00:00:01.345 - [Voiceover] We've now learned how 00:00:01.345 --> 00:00:03.074 to make a pretty complete web page 00:00:03.074 --> 00:00:05.440 with all sorts of marked up texts and images 00:00:05.440 --> 00:00:08.045 but it's lacking something, style. 00:00:08.045 --> 00:00:09.403 My web page here looks the same 00:00:09.403 --> 00:00:10.943 as the webpages you've been making. 00:00:10.943 --> 00:00:13.774 Black text, white background, same font, 00:00:13.774 --> 00:00:15.876 everything laid out from top to bottom. 00:00:15.876 --> 00:00:17.276 You've been on the web and you've seen 00:00:17.276 --> 00:00:20.308 that web pages can look very different from each other. 00:00:20.308 --> 00:00:21.833 Look around on Khan Academy at 00:00:21.833 --> 00:00:24.735 all the different colors and fonts and sizes. 00:00:24.735 --> 00:00:28.031 In fact, let's do this now, pause this talk through 00:00:28.031 --> 00:00:29.911 and look at a few different websites. 00:00:29.911 --> 00:00:31.543 What's different about each of them? 00:00:31.543 --> 00:00:35.066 What do you like or dislike about their style? 00:00:35.066 --> 00:00:37.240 I'll just wait right here. 00:00:38.148 --> 00:00:40.907 It's important to see how different web pages can be 00:00:40.907 --> 00:00:42.914 because pretty soon you'll figure out how 00:00:42.914 --> 00:00:44.743 to make you web pages look different 00:00:44.743 --> 00:00:45.776 and you wanna do that in a way 00:00:45.776 --> 00:00:48.537 that makes you happy because it represents you 00:00:48.537 --> 00:00:51.211 but it also makes other users happy too. 00:00:51.211 --> 00:00:52.942 With this all our web pages we need 00:00:52.942 --> 00:00:55.609 to learn a whole new language CSS 00:00:55.609 --> 00:00:57.897 that stands for Cascading Style Sheets 00:00:57.897 --> 00:00:59.746 and it's a way of defining styles that will apply 00:00:59.746 --> 00:01:01.877 to different parts of our web page. 00:01:01.877 --> 00:01:06.373 We embed CSS inside of HTML but it isn't actually HTML 00:01:06.373 --> 00:01:08.045 so we have to learn a whole new language 00:01:08.045 --> 00:01:11.211 and try not to confuse HTML with CSS. 00:01:11.211 --> 00:01:13.375 We'll see how we can use CSS to style all sorts 00:01:13.375 --> 00:01:15.278 of aspects of our web page like the font, 00:01:15.278 --> 00:01:17.434 sizes and layouts but we'll start 00:01:17.434 --> 00:01:19.579 with something that's pretty fun. 00:01:19.579 --> 00:01:22.107 Color, how about we change some headings 00:01:22.107 --> 00:01:25.409 on our web page to a nice grassy green. 00:01:25.409 --> 00:01:28.407 To start, we need to add a style tag 00:01:28.407 --> 00:01:30.408 to the head of our page. 00:01:31.900 --> 00:01:33.504 When the browser sees that, it will think, 00:01:33.504 --> 00:01:37.371 "Okay, everything inside here is CSS. 00:01:37.371 --> 00:01:40.102 "I'll use my CSS parser to understand it 00:01:40.102 --> 00:01:42.802 "instead of my HTML parser." 00:01:43.469 --> 00:01:48.410 Inside here, we'll add a CSS style rule. 00:01:48.410 --> 00:01:50.441 A style rule has a selector which tells 00:01:50.441 --> 00:01:51.666 a browser what part of a web page 00:01:51.666 --> 00:01:54.177 to style and declarations, which tell 00:01:54.177 --> 00:01:56.938 the browser how to style their part. 00:01:56.938 --> 00:02:00.276 If we want to style all the h2s on our page, 00:02:00.276 --> 00:02:05.276 we'll type the selector h2 and then we'll do curly braces. 00:02:06.082 --> 00:02:07.533 Make sure they're curly, not square 00:02:07.533 --> 00:02:10.133 or round those won't work. 00:02:10.133 --> 00:02:12.812 Inside, we'll put our declarations 00:02:12.812 --> 00:02:14.711 which have properties and values. 00:02:14.711 --> 00:02:18.673 To change the text color, we use the color property 00:02:19.307 --> 00:02:22.904 then we put a colon and now we need to come up with a value. 00:02:22.904 --> 00:02:25.774 We need to tell the browser what color we're interested in. 00:02:25.774 --> 00:02:28.242 Well we could just write green and it would 00:02:29.500 --> 00:02:32.166 understand it because green's a common color 00:02:32.166 --> 00:02:33.928 but that's not the green I wanted. 00:02:33.928 --> 00:02:35.912 I want a grassy green. 00:02:35.912 --> 00:02:39.547 If I write grassy green, uh oh. 00:02:39.547 --> 00:02:41.912 Now the browser gets confused and makes 00:02:41.912 --> 00:02:43.707 the headings black again because 00:02:43.707 --> 00:02:45.707 it's never heard of grassy green. 00:02:45.707 --> 00:02:48.344 If we want to be able to specify any color at all, 00:02:48.344 --> 00:02:51.714 then we need to use something called the RGB Spectrum 00:02:51.714 --> 00:02:54.180 which maybe you've heard about in art class. 00:02:54.180 --> 00:02:56.067 You don't need to be an expert in it though 00:02:56.067 --> 00:02:58.936 because we have an RGB color picker for you here. 00:02:58.936 --> 00:03:03.936 To use it, just replace this with RGB parentheses 00:03:04.069 --> 00:03:06.120 and a color picker will pop up. 00:03:06.120 --> 00:03:08.146 You can move your mouse inside of it 00:03:08.146 --> 00:03:10.533 and pick a color and you can see the color update 00:03:10.533 --> 00:03:14.579 in real-time and when you're happy click. 00:03:14.935 --> 00:03:17.010 Now do you notice how there were three numbers 00:03:17.010 --> 00:03:20.412 that it changed in our RGB parentheses? 00:03:20.412 --> 00:03:22.939 That's the red, green and blue 00:03:22.939 --> 00:03:25.867 components that make up that color. 00:03:26.502 --> 00:03:29.981 Okay, the neat thing about this CSS selector h2 00:03:29.981 --> 00:03:33.911 that we used is that selects all the h2s on the page 00:03:33.911 --> 00:03:35.866 so we can change multiple headlines 00:03:35.866 --> 00:03:39.189 because we want all of those h2s to be green. 00:03:39.189 --> 00:03:43.444 It's consistent for all those h2s it finds on the page. 00:03:43.444 --> 00:03:45.113 If you keep going with CSS, you can learn 00:03:45.113 --> 00:03:47.536 about many other ways of selecting parts of a page 00:03:47.536 --> 00:03:50.139 like if you wanted one of those h2s. 00:03:50.139 --> 00:03:54.078 You can go pretty far with these tag based selectors. 00:03:54.574 --> 00:03:56.400 Let's add another CSS style rule. 00:03:56.400 --> 00:03:59.210 This time to make the background a sky blue. 00:03:59.210 --> 00:04:02.077 How would we color the background on a page? 00:04:02.077 --> 00:04:05.870 Well, which tag encompasses the whole page, 00:04:05.870 --> 00:04:08.808 it's not the h1s, it's not the p, 00:04:08.808 --> 00:04:11.762 it's not the image, it's the body tag. 00:04:11.762 --> 00:04:14.412 Remember, everything visible is always 00:04:14.412 --> 00:04:16.481 inside that body tag. 00:04:16.481 --> 00:04:18.630 If we want to style the entire the page, 00:04:18.630 --> 00:04:22.262 we need to use a selector to select that tag. 00:04:22.710 --> 00:04:24.534 So we'll write body. 00:04:26.764 --> 00:04:29.659 Now, instead of color, we'll write background 00:04:29.659 --> 00:04:32.442 color, colon 00:04:33.318 --> 00:04:36.245 and then rgb parentheses. 00:04:36.491 --> 00:04:39.803 We get our color gripper and I'll pop it up 00:04:39.803 --> 00:04:41.933 and pick a blue that makes me think 00:04:41.933 --> 00:04:45.703 of frolicking bunnies and cumulus clouds. 00:04:45.703 --> 00:04:48.944 Ta da, look at my stylish page. 00:04:49.480 --> 00:04:51.637 There are hundreds more CSS properties 00:04:51.637 --> 00:04:54.243 besides color and background color 00:04:54.243 --> 00:04:56.907 but those ones are fun to get started with. 00:04:56.907 --> 00:04:59.321 In fact, after I'm done talking, play around 00:04:59.321 --> 00:05:01.544 with the colors I picked and customize this page 00:05:01.544 --> 00:05:05.166 to be more your style than mine, okay? 00:05:05.166 --> 00:05:06.534 Go.