CSS: The Definitive Guide, 3rd Edition

Chapter 9. Colors and Backgrounds

Remember the first time you changed the colors of a web page? Instead of the old black text on a gray background with blue links, all of a sudden you could use any combination of colors you desired—perhaps light blue text on a black background with lime-green hyperlinks. From there, it was just a short hop to colored text and, eventually, even to multiple colors for the text in a page, thanks to <FONT COLOR=" . . . ">. Once you could add background images, too, just about anything was possible, or so it seemed. CSS takes color and backgrounds even further, letting you apply many different colors and backgrounds to a single page, and all without a single FONT or TABLE tag.

Colors

When designing a page, you need to plan it out before you start. That’s generally true in any case, but with colors, it’s even more so. If you’re going to make all hyperlinks yellow, will they clash with the background color in any part of your document? If you use too many colors, will it overwhelm the user? (Hint: yes.) If you change the default hyperlink colors, will users still be able to figure out where your links are? (For example, if you make both regular text and hyperlink text the same color, it’s much harder to spot links—in fact, almost impossible if the links aren’t underlined.)

Despite the added planning, the ability to change the colors of elements is something almost every author will want to use, probably quite often. Used properly, colors can really strengthen ...