Section 20.1. Foreground Color

20.1. Foreground Color

Say goodbye to <font color=> forever. You can pitch the text, link, vlink, and alink attributes for the body element while you're at it.

The color property is used to describe the text (a.k.a. "foreground") color of an element. The foreground color is also used for an element's border unless it is specifically overridden with a border color rule.

color

---

Values:

     <color> | inherit 

Initial value:

Depends on user agent

Applies to:

All elements

Inherited:

Yes

20.1.1. Color Values

The value of the color property is any of the valid color types and system colors. Here's a refresher.

RGB colors can be specified in any of the following formats:

     {color: #0000FF;}     {color: #00F;}     {color: rgb(0,0,255);}     {color: rgb(0%, 0%, 100%);} 

The first example uses three two-digit hexadecimal RGB values (for a complete explanation, see Appendix D). The second example uses a shorthand three-digit syntax, which is converted to the six-digit form by replicating each digit (therefore, 00F is the same as 0000FF).

The last two formats use a functional notation specifying RGB values as a comma-separated list of regular values (from 0 to 255) or percentage values (from 0 to 100%). Note that percentage values can use decimals, e.g., rgb(0%, 50.5%, 33.3%).

CSS 1 and 2 also recognize 16 valid color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The CSS 2.1 Recommendation adds orange, for a total of 17.

The color property is easy to use, as shown in these examples (Figure 20-1). Unfortunately, in this book we are limited to the full spectrum of gray.

Note that this example and others in this chapter use inline styles purely as a space-saving device, not as a recommended markup practice. It is preferable to put style information in an external or embedded style sheet in the head of the document.

     <p style="color: #000">Aenean congue bibendum ligula.</p>     <p style="color: #666">Aenean congue bibendum ligula.</p>     <p style="color: #CCC">Aenean congue bibendum ligula.</p> 

Despite being fairly straightforward, there are still a few aspects of the foreground color property and the way browsers interpret it to keep in mind.

• The color property is inherited. It makes sense that when you set a color to the text of a paragraph, any emphasized or strong text within it would be that color, too.

  Figure 20-1. Changing the foreground color

  

• It is valid to add a foreground color to images. The content of the image won't be affected by it, of course, but the color will be used for the image border if one is specified.

• If there is both a foreground color and a border color property applied to an element, the border-color property always overrides color for the border color.

• If you want to change the color of all the text in a document, apply the color property to the body element. Color may be assigned globally to the html element or by using the universal selector (*) as well, but this is less common due to irregularities in inheritance and problems with form elements in some browsers. Be aware, however, that on some older browsers, table elements do not properly inherit properties from the body, so text within tables would go back to the default text color. To be on the safe side, you can make a color declaration for body and the relevant table elements, like this:

       body, table, td, th { color: fuschia; } /* ok, maybe not fuschia */ 

  
  

• You can apply the color property to form input elements like buttons and pull-down menus . Although it's valid use of CSS, it is not supported consistently across browsers. Make sure that your design is legible even if your chosen form input colors do not display the way you intended.