9.1. ColorsWhen 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 */
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. |