Section 9.1. Colors

9.1. 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 linksin 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, however, you want h2 elements to be dark blue because they're associated with different types of information. The simplest way to handle this is to assign a class to each h2 that should 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 */ 

It's actually better to pick class names that describe the type of information contained within, not 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 actually mean something and, more importantly, are 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 more than 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 only need to add 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 red, 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 all hyperlinks to be the same shade of blue, no matter where they were in the document.

Don't change that thinking when using CSS. If you use CSS to set the color of all hyperlinks (both visited and unvisited) to blue, that's what they'll be. In the same way, if you use styles to set the background of the body to 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 betweenlist items, entire lists, headings, table cells, and even (in a limited fashion) images. 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.

CSS(c) The Definitive Guide
CSS: The Definitive Guide
ISBN: 0596527330
EAN: 2147483647
Year: 2007
Pages: 130
Authors: Eric A. Meyer © 2008-2017.
If you may any questions please contact us: