Foreground Colors

The easiest way to set the foreground color of an element is with the property color.

This property accepts as a value any valid color type, as discussed in Chapter 4, such as #FFCC00 or rgb(100%,80%,0%), as well as the system-color keywords described in Chapter 13.

For nonreplaced elements, color sets the color of the text in the element, as illustrated in Figure 9-1:

<p style="color: gray;">This paragraph has a gray foreground.</p>
<p>This paragraph has the default foreground.</p>
Declared color versus default color

Figure 9-1. Declared color versus default color


In Figure 9-1, the default foreground color is black. That doesn’t have to be the case since users might have set their browsers (or other user agents) to use a different foreground (text) color. If the default text were set to green, the second paragraph in the preceding example would be green, not black—but the first paragraph would still be gray.

You need not restrict yourself to such simple operations, of course. There are plenty of ways to use color. You might have some paragraphs that contain text warning the user of a potential problem. In order to make this text stand out more than usual, you might decide to color it red. Simply apply a class of warn to each paragraph that contains warning text (<p class="warn"> ...

Get Cascading Style Sheets: The Definitive Guide, Second Edition now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.