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>
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"> ...
Get Cascading Style Sheets: The Definitive Guide, Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
