The easiest way to set the foreground
color of an element is with the property
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
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
warn to each paragraph that contains warning text