Now we've already used some CSS properties in order to apply CSS to our different HTML elements, but in 1
this section we're going to do a deep dive into some of the most important CSS properties that you'll 2
see and use. 3
And we're going to start with CSS, color properties. Some of the color properties you've already seen 4
previously. 5
I've shown you how you can set the background color of a particular HTML element by using the "background-color" 6
property, 7
and previously we've been setting it to basic colors like red or blue or green. 8
And remember that the way that the CSS rules work is the first part is the property. 9
And the part that comes after the colon is the value that you want to set that property to. 10
So in this case, we're setting the background-color of the HTML element, which remember contains everything 11
on our website, 12
so the entire web page to a color of red. 13
That's what that rule does. 14
Now, there are different types of color properties; 15
there's the background-color, but you can also simply use the "color" property, 16
and what this does is it sets the text color. 17
So always check the MDN Docs 18
if you're not sure which property does what. 19
Notice that in this case, we've got two colors, which we've named red and blue, 20
well, how do we know that we can use these colors 21
and what exactly are they? 22
Well, they're called Named Colors, 23
and there's a whole bunch of them out there with poetic names like cornflowerblue, or cadetblue, or 24
dimgrey, or olivedrab, etcetera. 25
And you can find all of them by, of course, going to the Developer Documentation. 26
If you Google for MDN Docs named color, the first link should take you to this web page. 27
Alternatively, you can use this URL as well, and the syntax is pretty simple 28
you simply use the name of the color and if you scroll through this table you'll see all the different 29
colors. 30
And don't worry too much about the CSS Level 1 or Level 2 or Level 3, 31
it just describes historically when each color was introduced. 32
So these were introduced first because it's basically the rainbow. 33
And then over time we got some more fun colors like cyan and darkkhaki and all of these different colors. 34
So you can simply copy the name of the color and paste it into your code and you'll be able to see that 35
rendered in your website. 36
Of course, even though there's many colors available in the default CSS named colors, 37
but you still sometimes might want to have a more unique color palette. 38
So what do you do in that case? 39
Well, one of my favorite color palettes is colorhunt.co. 40
It's a free tool that's created by designers for designers and of course, for us as well. 41
Here you've got professionally designed color palettes for colors stacked together that would look perfect 42
on any website. 43
You can imagine that if you select any of these random websites, maybe this could be the background 44
color of the website. 45
This could be an h1 color, this could be a subtitle or h2 color. 46
You have accent tones, you have main tones, and you can use all of these colors in your website. 47
But how do we use them if we don't have a name that's attached to it? 48
Instead, we've got all these numbers and letters, 49
what exactly are these? 50
Well, these are "hex codes" and they are a way of representing a larger number code for that particular 51
color. 52
So, for example, in this case, this is a color purple which is formed of three fractions, red, 53
green and blue. 54
And these are colors out of 255. 55
So if you imagine a fraction, 93 out of 255 red, 56 out of 255 green 145 out of 255 blue. 56
And when you mix all three of these primary colors, you can get so many different types of shades. 57
So in this case, we've got 93, 56, 145, 58
so 93 out of 255, 56 green out of 255 and 145. 59
So a little bit more blue and we end up with exactly the same shade as this purple you see right here. 60
Converting that RGB into a hex code, 61
so a different way of representing that number, 62
we get this particular hex code. 63
What does this mean for you? 64
Well, when you're using something like Color Hunt and you want to apply these different colors to your 65
website, you can simply copy the hex code and use it instead of the name. 66
And even on the MDN Docs for the named colors, you can see their hex codes lined up next to the names, 67
and in code it looks pretty much exactly the same. 68
Instead of the name, you just put the hex code. 69
So now it's time to try an exercise. 70
Go ahead and download this zip file from this current lesson, extract it and open it inside VS Code. 71
Once you're here, you should see it's a pretty simple website with just two elements inside the body, 72
a h1 and a h2. 73
And if we look at the preview, then you can see it's clearly a drab, black and white world. 74
We're going to change all of that by adding in CSS colors. 75
So you've got five steps that you need to complete here and you should follow them one by one, and by 76
the end of all five steps, you should have a website that looks something like this with lots of different 77
colors and different background colors as well. 78
Pause the video now and give this challenge a go. 79
All right. 80
So let's walk through the solution together. 81
We've got the background-color of the body, which is set to antiquewhite, which is this color right 82
here. 83
And we've got the text color of the h1 set to whitesmoke, 84
but you can also set the background color of the h1. 85
It's a property that's available on any of the elements and it simply takes the existing area of that 86
element and colors the background. 87
Now, that might have required a little bit of lateral thinking, but hopefully you got there in the 88
end. 89
And notice how in the h1 we've got all named colors and in the h2, I've asked you to use hex 90
colors and this is just so that you have practice adding colors using the two different methods. 91
Hopefully you got there in the end. 92
Once you're ready, head over to the next lesson and let's learn more about formatting fonts using CSS.