Understanding Style Sheets (part 2) - Bringing Out The Decorations (
Page 2 of 8 )
In addition to the
numerous font properties discussed in the first part of this series, CSS also
allows you tremendous control over the spacing, alignment and appearance of your
text.
The "text-decoration" property allows you to emphasize text by putting a line
under, over and through it. Take a look:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {text-decoration: underline}
/* display a line under text */
.answer {text-decoration: overline} /* display
a line over text */
.repeat {text-decoration: line-through} /* display a line
through text */
.no-imagination {text-decoration: blink; font-weight: bolder}
/* blink text
*/
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q.
How many psychoanalysts does it take to change a light bulb?
<P CLASS="answer">
A.
How many do you think it takes?
<P CLASS="repeat">
Q. How many psychoanalysts
does it take to change a light bulb?
<P CLASS="repeat">
A. How many do you
think it takes?
<P CLASS="no-imagination">
Why are you repeating jokes, you
unimaginative creep?
</BODY>
</HTML>
Note that the "blink" keyword only works in Netscape Navigator. One of the most
common uses of the "text-decorate" property is to underline links when the mouse
pointer moves over them, in combination with the A:hover pseudo-class (you remember
pseudo-classes, don't you?). Here's how:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
A {text-decoration: none}
A:hover
{text-decoration: underline}
</STYLE>
</HEAD>
<BODY>
<A HREF="#">This
is a link</A>. Hooray!
</BODY>
</HTML>
/ 25 
