Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Aside from controlling the formatting of type, controlling the color of elements on the page is probably the most common part of basic page styling. Let's take a look at some of the ways that we can control color through CSS. To do this I'm working with the color.htm, which is found in the 06_05 folder. You can basically apply color to three different aspects of elements. All elements have what's considered to be a background, which you can apply color to; a foreground, which is the actual contents themselves and you can usually apply color to those too; and a border, and you can apply a color there.
So the first thing I'm going to do is go up to the html style. Now, a lot of people don't realize you can style the html tag. It's this little guy right here, right? Well, that is the top-level parent tag, and yes, indeed, you can style it. So what I'm going to do is I'm going to come up to that and I'm just going to give it a background. And I'm going to do background-color, and the background color I'm going to give it is #777. This is what's known as hexadecimal notation. Basically, you're looking at shorthand notation, because most hexadecimal values have six values, so this would be 777777.
But if the pairs are the same--for example, if it was 77 and then aacc, you could just reference that as 7ac. So 777 is what we're doing there. That will be a neutral gray. So I'm going to go ahead and save this, and if I preview this in my browser, you can see now the color of the page is gray. Perfect! I'm going to take that a little bit further and go to the body. Remember, body is directly inside the html tag. And what's really interesting about the way pages are--for lack of a better word-- painted by your browsers, the parent tags are painted in the background and then all their child tags are painted on top of them.
Using that, I can come into the body and just go ahead and give it a background color as well -color. And here I'm just going to use a keyword, which is white. So if I save this and preview that, now you can see that the body element is white and the page behind it is displaying as gray. Excellent! We've seen how you can apply color to backgrounds, but you can also apply color to borders. With this body element, if I come down here and I say, okay, let me have a border-bottom.
I'm going to give it a 10-pixel width. I'm going to make it a solid border, and I'm going to make its color gold. If I save this and preview it, you can see now we're getting sort of a gold border on the bottom of our page. Very nice! You can also do the foreground. If I go to my h1 here--let's just put a background color on it real fast too. By the way, you don't always have to say just background-color; you can also do shorthand notation like just background here.
This works as well. And here I'm going to do a totally different color format. I'm going to do RGB. Most color can be defined in RGB, which is red, green, and blue, those three values. And their values are going to arrange from 0, which would mean none of the color, to 255, which would mean all the way. In RGB, white is 255, 255, 255; black is 000. We're going to get 44 for red, comma, 45 for green, comma, 140 for blue.
Who has all the stuff memorized? Not me. Those hexadecimal values and those RGB values, I typically find them in a different location, whether they're a reference or a graphic design program like Photoshop or Adobe has a site there called Kuler that you can go and mix colors together and get those values. So don't feel like you have to memorize all those; you don't. So if I save this and I preview it, I can see that now this heading 1 has a blue background color. Foreground color, that's what we're focusing on. I'm going to go back into the h1 here, and I'm going to use the color attribute.
So this is the attribute that you've probably been waiting for all along. We've been doing backgrounds, we've been doing borders, we've been applying colors, but what about just the color property itself? Well, now the color property is going to affect the foreground contents of an element. In the case of the h1, this is referring to the text inside the h1. So for color here, I'm going to do #ddd, which is a very light, light gray. So if I save this and preview it, you can see that now the color of that text has changed and it's now inside that background.
We didn't define any color on our paragraphs at all, and they're black, so that's one of the things to think about. If you don't define any color for an element, chances are the user agent is going to render it in black. There is a lot more to applying color than what we've discussed here. For right now, just focus on the fact that you can set color for most elements on their backgrounds, borders, and foreground content.
Get unlimited access to all courses for just $25/month.Become a member