O'Reilly logo

Cascading Style Sheets: The Definitive Guide, Second Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required