16.1. Element Colors

Most elements in an XHTML document have two color properties: a foreground property and a background property. Both of these properties can be controlled using CSS styles. The following sections discuss both types of color properties.

16.1.1. Foreground Colors

The foreground color of an element is typically used as the visible portion of an element—in most cases, the color of the font or other visible part of the element. You can control the foreground color of an element using the CSS color property, which has the following format:

color:  <color_value>;

As with other properties using color values, the value can be expressed using one of three methods:

  • Predefined color names (such as blue, red, black, or green)

  • Hexadecimal color values in #rrggbb form (#000000 for black, #FF0000 for red, #FF00FF for dark purple, and so on)

  • An RGB value using the rgb() function (rgb(100%,0,0) or rgb(255,0,0) for red)

More information on color values can be found in the "Border Color" section of Chapter 15.

For example, the following style defines a class of the paragraph element, which will be rendered with a red font:

p.redtext { color: red; }

The following paragraph, when used with the preceding style, will be rendered with red text:

<p class="redtext">This paragraph is important, and as such, appears in
red text. Other paragraphs in this section that are less important, appear
in standard black text.</p>

As with all style properties, you are not limited to element-level ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with O’Reilly online learning.

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