Text & Background color

In this article, we'll discuss just how easy it is to apply both text and background colors to your web pages. Let's start off with the text color.

Changing the text color

If you have already read the chapters on text and font in CSS, then you might be tempted to take a guess at the name of the property used for controlling text color - how about font-color or text-color? No, actually, because what we're changing is often referred to as the foreground (text) and background, the CSS property used to control the color of text is simply called color.

So, how can we use it? It's very, very simple - just have a look at this example:

<p style="color: Red;">Red text</p>
<p style="color: Blue;">Blue text</p>

And that's all you need. As you can see, I'm using so-called named colors. CSS has a whole bunch of these, but of course not every color in the world is covered by a name - more on that later on.

Changing the background color

Working with the background color is just as easy. For that purpose, we have a property called background-color. It allows us to change the background color of an element just as easy as we changed the text color, and the two properties can of course be combined:

<p style="background-color: Silver; color: Red;">Red text</p>
<p style="background-color: Gold; color: Blue;">Blue text</p>

As you can see, the two properties goes well with each other, but they don't have to be used simultaneously, if you are already happy with the current background or text color. Since both text and background colors are inherited from their parent element, you can easily be in a situation where you would only need to use one of them:

<p style="background-color: Silver; color: Red;">
	This is red text and <span style="background-color: Gray;">and this text has a darker background</span>.
</p>

Notice how the span element keeps the red text color inherited from the parent paragraph element, while we override the background color with a darker variant of the silver color.

Summary

Changing both text and background color is very easy with CSS. So far, we have only shown some basic examples, but to go beyond that and use more advanced color combinations, you need to know a bit more about the way color values are constructed with CSS. We'll discuss that in the next chapter.