- [Voiceover] We've now learned how

to make a pretty complete web page

with all sorts of marked
up texts and images

but it's lacking something, style.

My web page here looks the same

as the webpages you've been making.

Black text, white background, same font,

everything laid out from top to bottom.

You've been on the web and you've seen

that web pages can look very
different from each other.

Look around on Khan Academy at

all the different colors
and fonts and sizes.

In fact, let's do this now,
pause this talk through

and look at a few different websites.

What's different about each of them?

What do you like or
dislike about their style?

I'll just wait right here.

It's important to see how
different web pages can be

because pretty soon you'll figure out how

to make you web pages look different

and you wanna do that in a way

that makes you happy
because it represents you

but it also makes other users happy too.

With this all our web pages we need

to learn a whole new language CSS

that stands for Cascading Style Sheets

and it's a way of defining
styles that will apply

to different parts of our web page.

We embed CSS inside of HTML
but it isn't actually HTML

so we have to learn a whole new language

and try not to confuse HTML with CSS.

We'll see how we can use
CSS to style all sorts

of aspects of our web page like the font,

sizes and layouts but we'll start

with something that's pretty fun.

Color, how about we change some headings

on our web page to a nice grassy green.

To start, we need to add a style tag

to the head of our page.

When the browser sees that, it will think,

"Okay, everything inside here is CSS.

"I'll use my CSS parser to understand it

"instead of my HTML parser."

Inside here, we'll add a CSS style rule.

A style rule has a selector which tells

a browser what part of a web page

to style and declarations, which tell

the browser how to style their part.

If we want to style all
the h2s on our page,

we'll type the selector h2 and
then we'll do curly braces.

Make sure they're curly, not square

or round those won't work.

Inside, we'll put our declarations

which have properties and values.

To change the text color,
we use the color property

then we put a colon and now we
need to come up with a value.

We need to tell the browser
what color we're interested in.

Well we could just
write green and it would

understand it because
green's a common color

but that's not the green I wanted.

I want a grassy green.

If I write grassy green, uh oh.

Now the browser gets confused and makes

the headings black again because

it's never heard of grassy green.

If we want to be able to
specify any color at all,

then we need to use something
called the RGB Spectrum

which maybe you've heard
about in art class.

You don't need to be
an expert in it though

because we have an RGB
color picker for you here.

To use it, just replace
this with RGB parentheses

and a color picker will pop up.

You can move your mouse inside of it

and pick a color and you
can see the color update

in real-time and when you're happy click.

Now do you notice how
there were three numbers

that it changed in our RGB parentheses?

That's the red, green and blue

components that make up that color.

Okay, the neat thing
about this CSS selector h2

that we used is that selects
all the h2s on the page

so we can change multiple headlines

because we want all of
those h2s to be green.

It's consistent for all those
h2s it finds on the page.

If you keep going with CSS, you can learn

about many other ways of
selecting parts of a page

like if you wanted one of those h2s.

You can go pretty far with
these tag based selectors.

Let's add another CSS style rule.

This time to make the
background a sky blue.

How would we color the
background on a page?

Well, which tag
encompasses the whole page,

it's not the h1s, it's not the p,

it's not the image, it's the body tag.

Remember, everything visible is always

inside that body tag.

If we want to style the entire the page,

we need to use a selector
to select that tag.

So we'll write body.

Now, instead of color,
we'll write background

color, colon

and then rgb parentheses.

We get our color gripper
and I'll pop it up

and pick a blue that makes me think

of frolicking bunnies and cumulus clouds.

Ta da, look at my stylish page.

There are hundreds more CSS properties

besides color and background color

but those ones are fun
to get started with.

In fact, after I'm done
talking, play around

with the colors I picked
and customize this page

to be more your style than mine, okay?

Go.