0:00:00.767,0:00:01.345
- [Voiceover] We've now learned how

0:00:01.345,0:00:03.074
to make a pretty complete web page

0:00:03.074,0:00:05.440
with all sorts of marked[br]up texts and images

0:00:05.440,0:00:08.045
but it's lacking something, style.

0:00:08.045,0:00:09.403
My web page here looks the same

0:00:09.403,0:00:10.943
as the webpages you've been making.

0:00:10.943,0:00:13.774
Black text, white background, same font,

0:00:13.774,0:00:15.876
everything laid out from top to bottom.

0:00:15.876,0:00:17.276
You've been on the web and you've seen

0:00:17.276,0:00:20.308
that web pages can look very[br]different from each other.

0:00:20.308,0:00:21.833
Look around on Khan Academy at

0:00:21.833,0:00:24.735
all the different colors[br]and fonts and sizes.

0:00:24.735,0:00:28.031
In fact, let's do this now,[br]pause this talk through

0:00:28.031,0:00:29.911
and look at a few different websites.

0:00:29.911,0:00:31.543
What's different about each of them?

0:00:31.543,0:00:35.066
What do you like or[br]dislike about their style?

0:00:35.066,0:00:37.240
I'll just wait right here.

0:00:38.148,0:00:40.907
It's important to see how[br]different web pages can be

0:00:40.907,0:00:42.914
because pretty soon you'll figure out how

0:00:42.914,0:00:44.743
to make you web pages look different

0:00:44.743,0:00:45.776
and you wanna do that in a way

0:00:45.776,0:00:48.537
that makes you happy[br]because it represents you

0:00:48.537,0:00:51.211
but it also makes other users happy too.

0:00:51.211,0:00:52.942
With this all our web pages we need

0:00:52.942,0:00:55.609
to learn a whole new language CSS

0:00:55.609,0:00:57.897
that stands for Cascading Style Sheets

0:00:57.897,0:00:59.746
and it's a way of defining[br]styles that will apply

0:00:59.746,0:01:01.877
to different parts of our web page.

0:01:01.877,0:01:06.373
We embed CSS inside of HTML[br]but it isn't actually HTML

0:01:06.373,0:01:08.045
so we have to learn a whole new language

0:01:08.045,0:01:11.211
and try not to confuse HTML with CSS.

0:01:11.211,0:01:13.375
We'll see how we can use[br]CSS to style all sorts

0:01:13.375,0:01:15.278
of aspects of our web page like the font,

0:01:15.278,0:01:17.434
sizes and layouts but we'll start

0:01:17.434,0:01:19.579
with something that's pretty fun.

0:01:19.579,0:01:22.107
Color, how about we change some headings

0:01:22.107,0:01:25.409
on our web page to a nice grassy green.

0:01:25.409,0:01:28.407
To start, we need to add a style tag

0:01:28.407,0:01:30.408
to the head of our page.

0:01:31.900,0:01:33.504
When the browser sees that, it will think,

0:01:33.504,0:01:37.371
"Okay, everything inside here is CSS.

0:01:37.371,0:01:40.102
"I'll use my CSS parser to understand it

0:01:40.102,0:01:42.802
"instead of my HTML parser."

0:01:43.469,0:01:48.410
Inside here, we'll add a CSS style rule.

0:01:48.410,0:01:50.441
A style rule has a selector which tells

0:01:50.441,0:01:51.666
a browser what part of a web page

0:01:51.666,0:01:54.177
to style and declarations, which tell

0:01:54.177,0:01:56.938
the browser how to style their part.

0:01:56.938,0:02:00.276
If we want to style all[br]the h2s on our page,

0:02:00.276,0:02:05.276
we'll type the selector h2 and[br]then we'll do curly braces.

0:02:06.082,0:02:07.533
Make sure they're curly, not square

0:02:07.533,0:02:10.133
or round those won't work.

0:02:10.133,0:02:12.812
Inside, we'll put our declarations

0:02:12.812,0:02:14.711
which have properties and values.

0:02:14.711,0:02:18.673
To change the text color,[br]we use the color property

0:02:19.307,0:02:22.904
then we put a colon and now we[br]need to come up with a value.

0:02:22.904,0:02:25.774
We need to tell the browser[br]what color we're interested in.

0:02:25.774,0:02:28.242
Well we could just[br]write green and it would

0:02:29.500,0:02:32.166
understand it because[br]green's a common color

0:02:32.166,0:02:33.928
but that's not the green I wanted.

0:02:33.928,0:02:35.912
I want a grassy green.

0:02:35.912,0:02:39.547
If I write grassy green, uh oh.

0:02:39.547,0:02:41.912
Now the browser gets confused and makes

0:02:41.912,0:02:43.707
the headings black again because

0:02:43.707,0:02:45.707
it's never heard of grassy green.

0:02:45.707,0:02:48.344
If we want to be able to[br]specify any color at all,

0:02:48.344,0:02:51.714
then we need to use something[br]called the RGB Spectrum

0:02:51.714,0:02:54.180
which maybe you've heard[br]about in art class.

0:02:54.180,0:02:56.067
You don't need to be[br]an expert in it though

0:02:56.067,0:02:58.936
because we have an RGB[br]color picker for you here.

0:02:58.936,0:03:03.936
To use it, just replace[br]this with RGB parentheses

0:03:04.069,0:03:06.120
and a color picker will pop up.

0:03:06.120,0:03:08.146
You can move your mouse inside of it

0:03:08.146,0:03:10.533
and pick a color and you[br]can see the color update

0:03:10.533,0:03:14.579
in real-time and when you're happy click.

0:03:14.935,0:03:17.010
Now do you notice how[br]there were three numbers

0:03:17.010,0:03:20.412
that it changed in our RGB parentheses?

0:03:20.412,0:03:22.939
That's the red, green and blue

0:03:22.939,0:03:25.867
components that make up that color.

0:03:26.502,0:03:29.981
Okay, the neat thing[br]about this CSS selector h2

0:03:29.981,0:03:33.911
that we used is that selects[br]all the h2s on the page

0:03:33.911,0:03:35.866
so we can change multiple headlines

0:03:35.866,0:03:39.189
because we want all of[br]those h2s to be green.

0:03:39.189,0:03:43.444
It's consistent for all those[br]h2s it finds on the page.

0:03:43.444,0:03:45.113
If you keep going with CSS, you can learn

0:03:45.113,0:03:47.536
about many other ways of[br]selecting parts of a page

0:03:47.536,0:03:50.139
like if you wanted one of those h2s.

0:03:50.139,0:03:54.078
You can go pretty far with[br]these tag based selectors.

0:03:54.574,0:03:56.400
Let's add another CSS style rule.

0:03:56.400,0:03:59.210
This time to make the[br]background a sky blue.

0:03:59.210,0:04:02.077
How would we color the[br]background on a page?

0:04:02.077,0:04:05.870
Well, which tag[br]encompasses the whole page,

0:04:05.870,0:04:08.808
it's not the h1s, it's not the p,

0:04:08.808,0:04:11.762
it's not the image, it's the body tag.

0:04:11.762,0:04:14.412
Remember, everything visible is always

0:04:14.412,0:04:16.481
inside that body tag.

0:04:16.481,0:04:18.630
If we want to style the entire the page,

0:04:18.630,0:04:22.262
we need to use a selector[br]to select that tag.

0:04:22.710,0:04:24.534
So we'll write body.

0:04:26.764,0:04:29.659
Now, instead of color,[br]we'll write background

0:04:29.659,0:04:32.442
color, colon

0:04:33.318,0:04:36.245
and then rgb parentheses.

0:04:36.491,0:04:39.803
We get our color gripper[br]and I'll pop it up

0:04:39.803,0:04:41.933
and pick a blue that makes me think

0:04:41.933,0:04:45.703
of frolicking bunnies and cumulus clouds.

0:04:45.703,0:04:48.944
Ta da, look at my stylish page.

0:04:49.480,0:04:51.637
There are hundreds more CSS properties

0:04:51.637,0:04:54.243
besides color and background color

0:04:54.243,0:04:56.907
but those ones are fun[br]to get started with.

0:04:56.907,0:04:59.321
In fact, after I'm done[br]talking, play around

0:04:59.321,0:05:01.544
with the colors I picked[br]and customize this page

0:05:01.544,0:05:05.166
to be more your style than mine, okay?

0:05:05.166,0:05:06.534
Go.