Original subtitles

Now we've already used some CSS properties in order to apply CSS to our different HTML elements, but in

this section we're going to do a deep dive into some of the most important CSS properties that you'll

see and use.

And we're going to 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 want to 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 web page 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 Cornflower Blue or Cadet Blue or

Dim Gray or Olive Drab, etcetera.

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 web page.

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 1 or Level 2 or Level 3,

it just describes historically when each color was introduced.

So these were introduced first because 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.

Here you've got professionally designed color palettes for 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 tones, 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 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're using something like Color Hunt and you want to 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 named 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,

a h1 and a h2.

And if we look at the preview, then you can see it's clearly a drab, black and white world.

We're going to 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 antiquewhite, 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 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.