Cascading Style Sheets: The Definitive Guide, Second Edition

Foreground Colors

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

color

Values

<color> | inherit

Initial value

user agent-specific

Applies to

all elements

Inherited

yes

Computed value

as specified

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>

Figure 9-1. Declared color versus default color

Tip

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"> ...