Instructor: Now we've already used some CSS properties
in order to apply CSS to our different HTML elements.
But in this section, we're gonna do a deep dive
into some of the most important CSS properties
that you'll see and use.
And we're gonna start with CSS color properties.
Some of the color properties you've already seen previously.
I've shown you how you can set the background color
of a particular HTML element
by using the background-color property.
And previously, we've been setting it
to basic colors like red or blue or green.
And remember that the way that the CSS rules work
is the first part is the property,
and the part that comes after the colon
is the value that you wanna set that property to.
So in this case, we're setting the background color
of the HTML element, which remember,
contains everything on our website.
So the entire webpage to a color of red.
That's what that rule does.
Now, there are different types of color properties.
There's the background color,
but you can also simply use the color property.
And what this does is it sets the text color.
So always check the MDN docs
if you're not sure which property does what.
Notice that in this case, we've got two colors
which we've named red and blue.
Well, how do we know that we can use these colors?
And what exactly are they?
Well, they're called named colors.
And there's a whole bunch of them out there
with poetic names like CornflowerBlue or CadetBlue
or DimGray, OliveDrab, et cetera.
And you can find all of them by, of course,
going to the developer documentation.
If you Google for MDN docs named-color,
the first link should take you to this webpage.
Alternatively, you can use this URL as well.
And the syntax is pretty simple.
You simply use the name of the color,
and if you scroll through this table,
you'll see all the different colors.
And don't worry too much about the CSS level one
or level two or level three,
it just describes historically
when each color was introduced.
So these were introduced first
'cause it's basically the rainbow.
And then over time, we got some more fun colors
like cyan and dark khaki and all of these different colors.
So you can simply copy the name of the color
and paste it into your code,
and you'll be able to see that rendered in your website.
Of course, even though there's many colors available
in the default CSS named colors,
but you still sometimes might
want to have a more unique color palette.
So what do you do in that case?
Well, one of my favorite color palettes is colorhunt.co.
It's a free tool that's created by designers for designers,
and of course, for us as well.
But here, you've got professionally designed color palettes.
Four colors stacked together
that would look perfect on any website.
You can imagine that if you select
any of these random websites,
maybe this could be the background color of the website.
This could be an H1 color,
this could be a subtitle or H2 color.
You have accent tone, you have main tones,
and you can use all of these colors in your website.
But how do we use them if we don't have a name
that's attached to it?
Instead, we've got all these numbers and letters.
What exactly are these?
Well, these are hex codes,
and they are a way of representing a larger number code
for that particular color.
So for example, in this case, this is a color purple
which is formed of three fractions, red, green, and blue.
And these are colors out of 255.
So if you imagine a fraction.
93 out of 255, red,
56 out of 255, green,
and 145 out of 255 blue.
And when you mix all three of these primary colors,
you can get so many different types of shades.
So in this case, we've got 93, 56, 145.
So 93 out of 255.
56 green out of 255, and 145.
So a little bit more blue.
And we end up with exactly the same shade
as this purple you see right here.
Converting that RGB into a hex code.
So a different way of representing that number,
we get this particular hex code.
What does this mean for you?
Well, when you are using something like Color Hunt,
and you wanna apply these different colors to your website,
you can simply copy the hex code
and use it instead of the name.
And even on the MDN docs for the name colors,
you can see their hex codes lined up next to the names.
And in code, it looks pretty much exactly the same.
Instead of the name, you just put the hex code.
So now it's time to try an exercise.
Go ahead and download this zip file
from this current lesson, extract it,
and open it inside VS code.
Once you're here,
you should see it's a pretty simple website
with just two elements inside the body,
an H1 and an H2.
And if we look at the preview,
then you can see it's clearly a drab black and white world.
We're gonna change all of that by adding in CSS colors.
So you've got five steps that you need to complete here,
and you should follow them one by one.
And by the end of all five steps,
you should have a website that looks something like this,
with lots of different colors
and different background colors as well.
Pause the video now and give this challenge a go.
All right, so let's walk through the solution together.
We've got the background color of the body,
which is set to antique white,
which is this color right here.
And we've got the text color of the H1 set to white smoke,
but you can also set the background color of the H1.
It's a property that's available on any of the elements
and it's simply takes the existing area
of that element and colors the background.
Now, that might have required
a little bit of lateral thinking,
but hopefully, you got there in the end.
And notice how in the H1, we've got all named colors.
And in the H2, I've asked you to use hex colors.
And this is just so that you have practice
adding colors using the two different methods.
Hopefully, you got there in the end.
Once you're ready, head over to the next lesson
and let's learn more about formatting fonts using CSS.