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.
|