Taking Style Sheets to the Next Level

by Paul V. Miller

September 3, 2002 —

Greetings fellow style-sheeters! Last week, I talked about style sheets
-- cascading style sheets, to be exact. This week, we delve further into
style country.

Why are they called cascading style sheets rather than just style
sheets? The name has to do with dominance. As I said last week,
cascading style sheets can be placed in the header of your HTML document
and include specific instructions for treating certain types of text in
certain ways. For instance, inserting the following code in the HEAD of
your file would make all the level-3 headings in your document orange:

Simple as that. Now, everything between

and

within the BODY
of your page is orange. Great, especially if it's Halloween. Let's say,
however, that you've already specified that all the text in your page be
yellow and, for that matter, in 10 point verdana. You'd end up with the
following - a clash between two style sheets. Let's throw in a
background color of blue, just for some off-color (har har) fun:

The "color" attribute of the BODY tag denotes the color of all the text
within the document. "background-color: blue" specifies, you guessed it,
that the background color of the page will be blue (you can also specify
a background color for individual text elements - and a square of that
color will surround each word). The "font" attribute dictates that we'll
be seeing this page in small verdana type. However, level-3 headers are
also text, are they not? What color will they be? The answer is orange.
CSS requires that, as a general rule, more specific styles override
broader style rules. I promise I'll go into more detail with this later.
You may also be thinking about the size. H3s tend to be relatively
large, or are supposed to be, but the BODY style tells us to use 10pt
verdana. In this case, it's a tossup. My version of Internet Explorer
for the Mac (5) gives me nice large orange text for the H3s in my page,
although Netscape (4.7) does not make the text much larger than normal
(if at all).

The following list includes some other text-modifying properties you can
use:

text-transform (example: P { text-transform: lowercase }
Transforms all paragraph text into lowercase letters. Also available
in these values: "uppercase," "capitalize," or "none."

text-indent (example: H4 { text-indent: 60px }
Indents text on the line where it appears. This property can be
expressed in an actual amount of space, or a percentage of the page.

text-align (example: blockquote { text-align: justify }
Aligns text specified. Additional values: "left," "right" and
"center."

text-decoration (example: A:link { text-decoration: none }
Defines a style for the given elements

ITworld