Web Design in a Nutshell, 3rd Edition

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.

Tip

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