Join James Williamson for an in-depth discussion in this video Setting text color, part of CSS: Core Concepts.
- View Offline
Although it's not technically a text formatting property, setting the color of text is usually pretty high up on the list of things that designers want to do with it. So I want to take a moment to talk about setting color here. In CSS, you apply color using two main properties. The Background property that allows you to control the content behind an element and the Color property, which some people refer to as foreground color to avoid any sort of confusion with the background property.
We're going to take a quick look at applying color to text in this movie and then go deeper into your options when applying color in a separate chapter a little bit later on. So I have the font-color.htm file open and if I scroll down into my content I can see that I've got a paragraph here, and then I've got a couple of headings. Two headings just below that, one has a class of foreground, the other one has a class of background, so those are the elements that we're going to apply with these color options too. So I'm just going to go right up to my styles, and just below where it says, /*add styles here*/ I'm going to type in .foreground, so I'm going to use that class selector, and inside that I'm just going to go ahead and set color to red.
Now we've been doing this all through out the title, so you're probably very used to doing this. This is the color property and it basically controls the color of the content of the element, so not the background, but the content color itself. We're using a defined keyword like red, but there are many other things that we can do. We can use hexadecimal notation, we can use RGB values, we can use HSL values. So we have some options here, we're going to explore those options a little bit later on when we have our chapter on color here in just a little bit.
For the background selector, I'm going to go ahead and do something a little bit different here. We're going to do background and then inside that I'm going to use the background-color property, background-color, and I'm going to use maroon for that value. So again, I'm just using one of the reserved keywords here. Now I'm going to set a foreground color here as well, so you can mix these together. So I'm going to say color for foreground here, and we're just going to do white and then just to make sure that the text isn't butting up right against the edge of the element, I'm going to give it a little bit of padding.
We'll talk more about padding in our controlling element sizing chapter in just a little bit. We'll go ahead and save that, and I'm just going to test that in one of my browsers, and indeed, I get exactly what I was wanting. So red for the foreground color here, and then I'm using maroon for the background color of this element, you'll notice the big difference between backgrounds and foregrounds, and here I'm using white for the foreground color on this element as well. Of course, there are tremendous amount of options regarding setting color that I haven't even covered yet.
So a little bit later on we're going to talk about hexadecimal notation, how to use RGB and HSL values, and even how to use transparency when defining color.
- Exploring default styling
- Writing a selector
- Setting properties
- Working with common units of measurement, including ems and pixels
- Structuring HTML correctly
- Understanding the cascade and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Styling container elements
- Working with RGB vs. HSL values
- Styling drop shadows