[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.77,0:00:01.34,Default,,0000,0000,0000,,- [Voiceover] We've now learned how
Dialogue: 0,0:00:01.34,0:00:03.07,Default,,0000,0000,0000,,to make a pretty complete web page
Dialogue: 0,0:00:03.07,0:00:05.44,Default,,0000,0000,0000,,with all sorts of marked\Nup texts and images
Dialogue: 0,0:00:05.44,0:00:08.04,Default,,0000,0000,0000,,but it's lacking something, style.
Dialogue: 0,0:00:08.04,0:00:09.40,Default,,0000,0000,0000,,My web page here looks the same
Dialogue: 0,0:00:09.40,0:00:10.94,Default,,0000,0000,0000,,as the webpages you've been making.
Dialogue: 0,0:00:10.94,0:00:13.77,Default,,0000,0000,0000,,Black text, white background, same font,
Dialogue: 0,0:00:13.77,0:00:15.88,Default,,0000,0000,0000,,everything laid out from top to bottom.
Dialogue: 0,0:00:15.88,0:00:17.28,Default,,0000,0000,0000,,You've been on the web and you've seen
Dialogue: 0,0:00:17.28,0:00:20.31,Default,,0000,0000,0000,,that web pages can look very\Ndifferent from each other.
Dialogue: 0,0:00:20.31,0:00:21.83,Default,,0000,0000,0000,,Look around on Khan Academy at
Dialogue: 0,0:00:21.83,0:00:24.74,Default,,0000,0000,0000,,all the different colors\Nand fonts and sizes.
Dialogue: 0,0:00:24.74,0:00:28.03,Default,,0000,0000,0000,,In fact, let's do this now,\Npause this talk through
Dialogue: 0,0:00:28.03,0:00:29.91,Default,,0000,0000,0000,,and look at a few different websites.
Dialogue: 0,0:00:29.91,0:00:31.54,Default,,0000,0000,0000,,What's different about each of them?
Dialogue: 0,0:00:31.54,0:00:35.07,Default,,0000,0000,0000,,What do you like or\Ndislike about their style?
Dialogue: 0,0:00:35.07,0:00:37.24,Default,,0000,0000,0000,,I'll just wait right here.
Dialogue: 0,0:00:38.15,0:00:40.91,Default,,0000,0000,0000,,It's important to see how\Ndifferent web pages can be
Dialogue: 0,0:00:40.91,0:00:42.91,Default,,0000,0000,0000,,because pretty soon you'll figure out how
Dialogue: 0,0:00:42.91,0:00:44.74,Default,,0000,0000,0000,,to make you web pages look different
Dialogue: 0,0:00:44.74,0:00:45.78,Default,,0000,0000,0000,,and you wanna do that in a way
Dialogue: 0,0:00:45.78,0:00:48.54,Default,,0000,0000,0000,,that makes you happy\Nbecause it represents you
Dialogue: 0,0:00:48.54,0:00:51.21,Default,,0000,0000,0000,,but it also makes other users happy too.
Dialogue: 0,0:00:51.21,0:00:52.94,Default,,0000,0000,0000,,With this all our web pages we need
Dialogue: 0,0:00:52.94,0:00:55.61,Default,,0000,0000,0000,,to learn a whole new language CSS
Dialogue: 0,0:00:55.61,0:00:57.90,Default,,0000,0000,0000,,that stands for Cascading Style Sheets
Dialogue: 0,0:00:57.90,0:00:59.75,Default,,0000,0000,0000,,and it's a way of defining\Nstyles that will apply
Dialogue: 0,0:00:59.75,0:01:01.88,Default,,0000,0000,0000,,to different parts of our web page.
Dialogue: 0,0:01:01.88,0:01:06.37,Default,,0000,0000,0000,,We embed CSS inside of HTML\Nbut it isn't actually HTML
Dialogue: 0,0:01:06.37,0:01:08.04,Default,,0000,0000,0000,,so we have to learn a whole new language
Dialogue: 0,0:01:08.04,0:01:11.21,Default,,0000,0000,0000,,and try not to confuse HTML with CSS.
Dialogue: 0,0:01:11.21,0:01:13.38,Default,,0000,0000,0000,,We'll see how we can use\NCSS to style all sorts
Dialogue: 0,0:01:13.38,0:01:15.28,Default,,0000,0000,0000,,of aspects of our web page like the font,
Dialogue: 0,0:01:15.28,0:01:17.43,Default,,0000,0000,0000,,sizes and layouts but we'll start
Dialogue: 0,0:01:17.43,0:01:19.58,Default,,0000,0000,0000,,with something that's pretty fun.
Dialogue: 0,0:01:19.58,0:01:22.11,Default,,0000,0000,0000,,Color, how about we change some headings
Dialogue: 0,0:01:22.11,0:01:25.41,Default,,0000,0000,0000,,on our web page to a nice grassy green.
Dialogue: 0,0:01:25.41,0:01:28.41,Default,,0000,0000,0000,,To start, we need to add a style tag
Dialogue: 0,0:01:28.41,0:01:30.41,Default,,0000,0000,0000,,to the head of our page.
Dialogue: 0,0:01:31.90,0:01:33.50,Default,,0000,0000,0000,,When the browser sees that, it will think,
Dialogue: 0,0:01:33.50,0:01:37.37,Default,,0000,0000,0000,,"Okay, everything inside here is CSS.
Dialogue: 0,0:01:37.37,0:01:40.10,Default,,0000,0000,0000,,"I'll use my CSS parser to understand it
Dialogue: 0,0:01:40.10,0:01:42.80,Default,,0000,0000,0000,,"instead of my HTML parser."
Dialogue: 0,0:01:43.47,0:01:48.41,Default,,0000,0000,0000,,Inside here, we'll add a CSS style rule.
Dialogue: 0,0:01:48.41,0:01:50.44,Default,,0000,0000,0000,,A style rule has a selector which tells
Dialogue: 0,0:01:50.44,0:01:51.67,Default,,0000,0000,0000,,a browser what part of a web page
Dialogue: 0,0:01:51.67,0:01:54.18,Default,,0000,0000,0000,,to style and declarations, which tell
Dialogue: 0,0:01:54.18,0:01:56.94,Default,,0000,0000,0000,,the browser how to style their part.
Dialogue: 0,0:01:56.94,0:02:00.28,Default,,0000,0000,0000,,If we want to style all\Nthe h2s on our page,
Dialogue: 0,0:02:00.28,0:02:05.28,Default,,0000,0000,0000,,we'll type the selector h2 and\Nthen we'll do curly braces.
Dialogue: 0,0:02:06.08,0:02:07.53,Default,,0000,0000,0000,,Make sure they're curly, not square
Dialogue: 0,0:02:07.53,0:02:10.13,Default,,0000,0000,0000,,or round those won't work.
Dialogue: 0,0:02:10.13,0:02:12.81,Default,,0000,0000,0000,,Inside, we'll put our declarations
Dialogue: 0,0:02:12.81,0:02:14.71,Default,,0000,0000,0000,,which have properties and values.
Dialogue: 0,0:02:14.71,0:02:18.67,Default,,0000,0000,0000,,To change the text color,\Nwe use the color property
Dialogue: 0,0:02:19.31,0:02:22.90,Default,,0000,0000,0000,,then we put a colon and now we\Nneed to come up with a value.
Dialogue: 0,0:02:22.90,0:02:25.77,Default,,0000,0000,0000,,We need to tell the browser\Nwhat color we're interested in.
Dialogue: 0,0:02:25.77,0:02:28.24,Default,,0000,0000,0000,,Well we could just\Nwrite green and it would
Dialogue: 0,0:02:29.50,0:02:32.17,Default,,0000,0000,0000,,understand it because\Ngreen's a common color
Dialogue: 0,0:02:32.17,0:02:33.93,Default,,0000,0000,0000,,but that's not the green I wanted.
Dialogue: 0,0:02:33.93,0:02:35.91,Default,,0000,0000,0000,,I want a grassy green.
Dialogue: 0,0:02:35.91,0:02:39.55,Default,,0000,0000,0000,,If I write grassy green, uh oh.
Dialogue: 0,0:02:39.55,0:02:41.91,Default,,0000,0000,0000,,Now the browser gets confused and makes
Dialogue: 0,0:02:41.91,0:02:43.71,Default,,0000,0000,0000,,the headings black again because
Dialogue: 0,0:02:43.71,0:02:45.71,Default,,0000,0000,0000,,it's never heard of grassy green.
Dialogue: 0,0:02:45.71,0:02:48.34,Default,,0000,0000,0000,,If we want to be able to\Nspecify any color at all,
Dialogue: 0,0:02:48.34,0:02:51.71,Default,,0000,0000,0000,,then we need to use something\Ncalled the RGB Spectrum
Dialogue: 0,0:02:51.71,0:02:54.18,Default,,0000,0000,0000,,which maybe you've heard\Nabout in art class.
Dialogue: 0,0:02:54.18,0:02:56.07,Default,,0000,0000,0000,,You don't need to be\Nan expert in it though
Dialogue: 0,0:02:56.07,0:02:58.94,Default,,0000,0000,0000,,because we have an RGB\Ncolor picker for you here.
Dialogue: 0,0:02:58.94,0:03:03.94,Default,,0000,0000,0000,,To use it, just replace\Nthis with RGB parentheses
Dialogue: 0,0:03:04.07,0:03:06.12,Default,,0000,0000,0000,,and a color picker will pop up.
Dialogue: 0,0:03:06.12,0:03:08.15,Default,,0000,0000,0000,,You can move your mouse inside of it
Dialogue: 0,0:03:08.15,0:03:10.53,Default,,0000,0000,0000,,and pick a color and you\Ncan see the color update
Dialogue: 0,0:03:10.53,0:03:14.58,Default,,0000,0000,0000,,in real-time and when you're happy click.
Dialogue: 0,0:03:14.94,0:03:17.01,Default,,0000,0000,0000,,Now do you notice how\Nthere were three numbers
Dialogue: 0,0:03:17.01,0:03:20.41,Default,,0000,0000,0000,,that it changed in our RGB parentheses?
Dialogue: 0,0:03:20.41,0:03:22.94,Default,,0000,0000,0000,,That's the red, green and blue
Dialogue: 0,0:03:22.94,0:03:25.87,Default,,0000,0000,0000,,components that make up that color.
Dialogue: 0,0:03:26.50,0:03:29.98,Default,,0000,0000,0000,,Okay, the neat thing\Nabout this CSS selector h2
Dialogue: 0,0:03:29.98,0:03:33.91,Default,,0000,0000,0000,,that we used is that selects\Nall the h2s on the page
Dialogue: 0,0:03:33.91,0:03:35.87,Default,,0000,0000,0000,,so we can change multiple headlines
Dialogue: 0,0:03:35.87,0:03:39.19,Default,,0000,0000,0000,,because we want all of\Nthose h2s to be green.
Dialogue: 0,0:03:39.19,0:03:43.44,Default,,0000,0000,0000,,It's consistent for all those\Nh2s it finds on the page.
Dialogue: 0,0:03:43.44,0:03:45.11,Default,,0000,0000,0000,,If you keep going with CSS, you can learn
Dialogue: 0,0:03:45.11,0:03:47.54,Default,,0000,0000,0000,,about many other ways of\Nselecting parts of a page
Dialogue: 0,0:03:47.54,0:03:50.14,Default,,0000,0000,0000,,like if you wanted one of those h2s.
Dialogue: 0,0:03:50.14,0:03:54.08,Default,,0000,0000,0000,,You can go pretty far with\Nthese tag based selectors.
Dialogue: 0,0:03:54.57,0:03:56.40,Default,,0000,0000,0000,,Let's add another CSS style rule.
Dialogue: 0,0:03:56.40,0:03:59.21,Default,,0000,0000,0000,,This time to make the\Nbackground a sky blue.
Dialogue: 0,0:03:59.21,0:04:02.08,Default,,0000,0000,0000,,How would we color the\Nbackground on a page?
Dialogue: 0,0:04:02.08,0:04:05.87,Default,,0000,0000,0000,,Well, which tag\Nencompasses the whole page,
Dialogue: 0,0:04:05.87,0:04:08.81,Default,,0000,0000,0000,,it's not the h1s, it's not the p,
Dialogue: 0,0:04:08.81,0:04:11.76,Default,,0000,0000,0000,,it's not the image, it's the body tag.
Dialogue: 0,0:04:11.76,0:04:14.41,Default,,0000,0000,0000,,Remember, everything visible is always
Dialogue: 0,0:04:14.41,0:04:16.48,Default,,0000,0000,0000,,inside that body tag.
Dialogue: 0,0:04:16.48,0:04:18.63,Default,,0000,0000,0000,,If we want to style the entire the page,
Dialogue: 0,0:04:18.63,0:04:22.26,Default,,0000,0000,0000,,we need to use a selector\Nto select that tag.
Dialogue: 0,0:04:22.71,0:04:24.53,Default,,0000,0000,0000,,So we'll write body.
Dialogue: 0,0:04:26.76,0:04:29.66,Default,,0000,0000,0000,,Now, instead of color,\Nwe'll write background
Dialogue: 0,0:04:29.66,0:04:32.44,Default,,0000,0000,0000,,color, colon
Dialogue: 0,0:04:33.32,0:04:36.24,Default,,0000,0000,0000,,and then rgb parentheses.
Dialogue: 0,0:04:36.49,0:04:39.80,Default,,0000,0000,0000,,We get our color gripper\Nand I'll pop it up
Dialogue: 0,0:04:39.80,0:04:41.93,Default,,0000,0000,0000,,and pick a blue that makes me think
Dialogue: 0,0:04:41.93,0:04:45.70,Default,,0000,0000,0000,,of frolicking bunnies and cumulus clouds.
Dialogue: 0,0:04:45.70,0:04:48.94,Default,,0000,0000,0000,,Ta da, look at my stylish page.
Dialogue: 0,0:04:49.48,0:04:51.64,Default,,0000,0000,0000,,There are hundreds more CSS properties
Dialogue: 0,0:04:51.64,0:04:54.24,Default,,0000,0000,0000,,besides color and background color
Dialogue: 0,0:04:54.24,0:04:56.91,Default,,0000,0000,0000,,but those ones are fun\Nto get started with.
Dialogue: 0,0:04:56.91,0:04:59.32,Default,,0000,0000,0000,,In fact, after I'm done\Ntalking, play around
Dialogue: 0,0:04:59.32,0:05:01.54,Default,,0000,0000,0000,,with the colors I picked\Nand customize this page
Dialogue: 0,0:05:01.54,0:05:05.17,Default,,0000,0000,0000,,to be more your style than mine, okay?
Dialogue: 0,0:05:05.17,0:05:06.53,Default,,0000,0000,0000,,Go.