Home arrow Style-Sheets arrow Page 2 - Understanding Style Sheets (part 2)

Bringing Out The Decorations - Style Sheets

The concluding part of this tutorial explores some of the CSS properties related to text alignment, spacing and positioning, together with a look at absolute and relative positioning, z-index stacking, and borders and padding.

TABLE OF CONTENTS:
  1. Understanding Style Sheets (part 2)
  2. Bringing Out The Decorations
  3. Gimme My Space!
  4. Reclining Every Which Way
  5. Above The Watermark
  6. Going Shopping
  7. The View From The Top
  8. The Z-Factor
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 25
October 04, 2000

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

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


 
 
>>> More Style-Sheets Articles          >>> More By icarus, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

STYLE-SHEETS ARTICLES

- What is CSS?
- The Power of CSS
- Understanding Style Sheets (part 2)
- Understanding Style Sheets (Part 1)

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: