CSS: The Definitive Guide, 3rd Edition (38 page)

This may come as a surprise, but it is possible to
apply padding to replaced elements, although there are still limitations at the time
of this writing.

The most surprising case is that you can apply padding to an image, like this:

img {background: silver; padding: 1em;}

Regardless of whether the replaced element is block-level or inline, the padding
will surround its content, and the background color will fill into that padding, as
shown in
Figure 8-45
. You can also see
that padding will push an element's border away from its content.

Figure 8-45. Padding replaced elements

As of CSS2.1, however, there was some confusion over what to do about styling form
elements such as
input
. It is not entirely clear
where the padding of a checkbox resides, for example. Therefore, as of this writing,
some browsers—such as Mozilla—ignore padding (and other forms of styling) for form
elements. There is hope that a CSS specification will emerge that describes
form-element styling in the future.

The other possible limitation is that many older browsers did not apply padding to
images, including IE5 for Windows.

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 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, 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
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 between—list 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.

color

Figure 9-1. Declared color versus default color

Figure 9-2. Changing colors

There are many uses for
color
, the most basic of which is to replace the HTML 3.2
BODY
attributes
TEXT
,
LINK
,
ALINK
,
and
VLINK
. With the anchor pseudo-classes,
color
can replace these
BODY
attributes outright. The first line in the
following example can be rewritten with the subsequent CSS, and it will have the
result depicted in
Figure 9-3
:

body {color: black;}     /* replacement css */
a:link {color: #808080;}
a:active {color: silver;}
a:visited {color: #333333;}

Figure 9-3. Replacing BODY attributes with CSS

While this may seem like a lot of extra typing, consider two things. First, this
is a major improvement over the old method of
BODY
attributes, in which you could make changes only at the document level. Back then, if
you wanted some links to be medium gray and others to be a relatively dark gray, you
couldn't do it with the
BODY
attributes. Instead,
you'd have to use

on
every single anchor that needed to be relatively dark. Not so with CSS; now, you can
just add a class to all anchors that need a shade of gray and modify your styles
accordingly:

body {color: black;}
a:link {color: #808080;}      /* medium gray */
a.external:link {color: silver;}
a:active {color: silver;}
a:visited {color: #333;}   /* a very dark gray */

This sets all anchors with a
class
of
external
to silver instead of medium gray. They'll still
be a dark gray once they're visited, unless you add a special rule for that as well:

body {color: black;}
a:link {color: #808080;}      /* medium gray */
a.external:link  {color: #666;}
a:active {color: silver;}
a:visited {color: #333;}   /* a very dark gray */
a.external:visited {color: black;}

This will make all external links a dark gray before they're visited and black
after, while all other links will be dark gray when visited and medium gray when
unvisited.

The value of
color
can also affect the borders around an element.
Let's assume you've declared these styles, which have the result shown in
Figure 9-4
:

p.aside {color: gray; border-style: solid;}

Figure 9-4. Border colors are taken from the content's color

The element


has gray
text and a gray medium-width solid border. This is because the foreground color is
applied to the borders by default. The basic way to override this is with the
property
border-color
:

p.aside {color: gray; border-style: solid; border-color: black;}

This will make the text
gray
, but the borders
will be
black
. Any value set for
border-color
will always override the value of
color
.

The borders, incidentally, allow you to affect the foreground color of
images.
Since images are already composed of colors, you can't really affect them using
color
, but you can change the color of any
border around the image. This can be done using either
color
or
border-color
. Therefore, the
following rules will have the same visual effect on images of class
type1
and
type2
, as shown in
Figure 9-5
:

img.type1 {color: gray; border-style: solid;}
img.type2 {border-color: gray; border-style: solid;}

Figure 9-5. Setting the border color for images

Setting a value for
color
should (in theory, anyway) apply to form elements. Declaring
select
elements to have dark gray text should
be as simple as this:

select {color: rgb(33%,33%,33%);}

This might also set the color of
the borders around the edge of the
select
element, or it might not. It all depends on the
user agent and its default styles.

You could also set the foreground color of
input
elements, although, as you can see in
Figure 9-6
, doing so would apply that color
to all inputs, from text to radio button to checkbox inputs:

select {color: rgb(33%,33%,33%);}
input {color: gray;}

Figure 9-6. Changing form element foregrounds

Note in
Figure 9-6
that the text color
next to the checkboxes is still black. This is because you've assigned styles only to
elements like
input
and
select
, not normal paragraph (or other) text.

CSS1 offered no way to distinguish between different types of
input
elements. So, if you wanted checkboxes to be a
different color than radio buttons, you had to assign them classes to get the desired
result:

input.radio {color: #666;}
input.check {color: #CCC;}

In CSS2 and later, it's a little easier to distinguish between different elements
based on which attributes they have, thanks to attribute selectors:

input[type="radio"] {color: #333;}
input[type="checkbox"] {color: #666;}

Attribute selectors allow you to dispense with the classes altogether, at least in
this instance. Unfortunately, many user agents don't support attribute selectors, so
the use of classes may be necessary for a while.