- [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.