Cascading Style Sheets The Definitive Guide 2nd Edition-9.1 Colors

9.1 Colors

When you're 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 that clash with the background color in any part of your document? If you use too many colors, will the user be too overwhelmed (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 will be 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 the presentation of a document. As an example, let's say you have a design where all h1 elements should be green, most h2 elements should be blue, and all hyperlinks should be dark red. In some cases, you'll want h2 elements to be dark blue, however, because they're associated with different types of information. The simplest way to handle this is to assign a class to each h2 that needs to be dark blue and declare the following:

h1 {color: green;}
h2 {color: blue;}
h2.dkblue {color: navy;}
a {color: maroon;}   /* a good dark red color */

However, it's actually better to pick class names that are descriptive of the type of information contained within, not of the visual effect you're trying to achieve. For example, let's say that you want dark blue to be applied to all h2 elements that are subsection headings. It's preferable to pick a class name like subsec or even sub-section, which have the advantage of actually meaning something, and, more importantly, they're independent of any presentational concepts. After all, you might decide later to make all subsection titles dark red instead of dark blue, and the statement h2.dkblue {color: maroon;} is a little silly.

From this simple example, you can see that it's generally better to plan ahead when you're using styles, so you can use all of the tools at your disposal. For example, suppose you add a navigational bar to the page in the preceding example. Within this bar, hyperlinks should be yellow, not dark red. If the bar is marked with an ID of navbar, then you need to add only this rule:

#navbar a {color: yellow;}

This will change the color of hyperlinks within the navigation bar, without affecting other hyperlinks throughout the document.

There is really only one type of color in CSS, and that's a plain, solid color. If you set the color of a document to be red, then the text will be the same shade of red. HTML works the same way, of course. When you declared <BODY LINK="blue" VLINK="blue"> back in the HTML 3.2 days, you expected that all hyperlinks would be the same shade of blue, no matter where they were in the document.

Don't change that thinking when you're using CSS. If you use CSS to set the color of all hyperlinks (both visited and unvisited) to be blue, then that's what they'll be. In the same way, if you use styles to set the background of the body to be green, then the entire body background will be the same shade of green.

In CSS, you can set both the foreground and background colors of any element, from the body down to emphasis and hyperlink elements, and almost everything in between—list items, entire lists, headings, table cells, and even (in a limited fashion) images. In order to understand how this works, though, it's important to understand what's in the foreground of an element and what isn't.

Let's start with the foreground itself; generally speaking, it's the text of an element, although the foreground also includes the borders around the element. Thus, there are two ways to directly affect the foreground color of an element: by using the color property and by setting the border colors using one of a number of border properties, as discussed in the previous chapter.

< Day Day Up >