Spring Into HTML & CSS: Working with Color and Images Using CSS

You can use 17 color names to describe color. The colors are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, and orange (orange was just introduced in CSS 2.1):

You’re probably wondering which color value type you should use. The honest answer? All of them! You’ll probably find yourself using combinations of keywords, shorthand hex, and hexadecimal most frequently.

In the upcoming CSS 3.0, many additional colors have been added, but they aren’t available for widespread, valid use at the time of this writing.

Adding Color to Backgrounds

Adding color to backgrounds is extremely easy and very useful. You can add color to your page background and any element background.

Color is added to the document background by selecting the body element and using the background-color property and a color property value:

Here you see I’ve chosen a background of dark gray to the entire body.When viewed in a browser, this turns the background color completely gray (see Figure 8-2).

You should always set a page background color, even if you intend to use graphics and other element backgrounds in your design. This is because colors are interpreted by browsers very quickly and render before any graphics, providing a more streamlined visual experience for your visitors.

Color and Element Backgrounds

With CSS, you can add color to individual element backgrounds. To do this, simply select the element and create a rule. I’ll do this for the h1 as I build a style sheet for our simple document:

I’ll go ahead and add rules for the paragraph and anchor element color, too (see Example 8-3).

FIGURE 8-4 Background colors as applied to the document and element backgrounds; note that the element background colors stretch to the full width of the element.

Spicing Up a Table Using Background Color

In this section, I’ll show you how to add a little spice to your tables using background colors. So far, you’ve used element selectors, which relate directly to a specific HTML element, such as body, h1, p, and a. In this section, you’ll add what’s known as a class selector.

Class selectors are custom selectors that you give a name to; you precede that name with a dot, as in .classname. Classes are then applied to an element in the HTML using the class attribute, with a value of the class name:

Typically, you’ll want to describe the function of the class rather than the presentation. So, if you’re going to apply a background color to every other table row, you’ll want to name your class something like .alternaterow instead of .gray. This way, if you want to change the color, you needn’t change the class name throughout your documents, which defeats the management advantages of CSS.

Example 8.4 shows a modified table you first worked with in Chapter 4, “Creating Tables.” You’ll note that I made one change in the table markup: I took out all the table attributes except for cellspacing. This is because there is no effective means of providing cellspacing in CSS.