Cascading Style Sheets: The Definitive Guide, Second Edition

Color

One of the first questions every starting web author asks is, “How do I set colors on my page?” Under HTML, you had two choices: you could use one of a small number of colors with names, like red or purple, or employ a vaguely cryptic method using hexadecimal codes. Both of these methods for describing colors remain in CSS, along with some other—and, I think, more intuitive—methods.

Named Colors

Assuming that you’re content to pick from a small, basic set of colors, the easiest method is simply to use the name of the color you want. CSS calls these color choices, logically enough, named colors.

Contrary to what some browser makers might have you believe, you have a limited palette of named-color keywords. For example, you’re not going to be able to choose “mother-of-pearl” because it isn’t a defined color. As of CSS2.1, the CSS specification defines 17 color names. These are the 16 colors defined in HTML 4.01 plus orange:

aqua	fuchsia	lime	olive	red	white
black	gray	maroon	orange	silver	yellow
blue	green	navy	purple	teal

So, let’s say you want all first-level headings to be maroon. The best declaration would be:

h1 {color: maroon;}

Simple and straightforward, isn’t it? Figure 4-1 shows a few more examples:

h1 {color: gray;}
h2 {color: silver;}
h3 {color: black;}

Figure 4-1. Naming colors

Of course, you’ve probably seen (and maybe even used) color names besides ...