The community is working on translating this tutorial into Chinese, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
If you are fluent in Chinese, then please help us - just point to any untranslated element (highlighted with a yellow left border - remember that images should have their titles translated as well!) inside the article and click the translation button to get started. Or have a look at the current translation status for the Chinese language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
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.
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.