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