Cascading Style Sheets: The Definitive Guide

Chapter 6. Colors and Backgrounds

Many of you will no doubt 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, you probably moved on to putting images in the background and combining background images with appropriately colored text to make some really cool-looking pages.

Eventually, though, one comes to realize that setting a single color for all of the text in a page just isn’t enough. That’s how <FONT COLOR="..."> came into being. Without it, you wouldn’t be able to have pages where some text is black, some red, and some white, for example.

Now, thanks to the power of CSS, you can have many, many different colors within a single page, and without using a single FONT tag. This gives authors the ability to set up pages where the main text is black with a white background, but the navigational hyperlinks along the side of the page are black on a light purple background. There are almost infinite possibilities: defining red text for warnings, using a dark purple to make boldfaced text even more obvious, setting each heading to be a different shade of green, and on and on.

Of course, this means that when you’re designing a page, you need to put some thought into it first. That’s generally true in any case, but with colors, it’s even more so. For example, ...