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

The Z-Factor - 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
And finally, when you're talking about positioning, you can't omit the "z-index" property, which allows you to specify the "stacking order" of layers placed one above the other. A higher z-index value pushes an element up, while a lower value pulls it down (relatively speaking, of course.)

One of the more common uses of the "z-index" property is to create a drop shadow - the next example will demonstrate this: v
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.level1 {position: relative; 
top: 15; left: 25; z-index: 10; color: #00000;
font-family: Arial; font-size:25pt}
.level2 
{position: relative; top: -22; left: 28; z-index: 6; color:
#ADADAD; font-family: 
Arial; font-size:25pt}
.level3 {position: relative; top: -59; left: 29; z-index: 
6; color:
#ADADAD; font-family: Arial; font-size:25pt}
</STYLE>
</HEAD>
<BODY>
<DIV 
CLASS="level1">Scared of my shadow? Nah!</DIV>
<DIV CLASS="level2">Scared 
of my shadow? Nah!</DIV>
<DIV CLASS="level3">Scared of my shadow? Nah!</DIV>
</BODY>
</HTML>
That just about covers most of the common style sheet properties you'll be using. There are quite a few more defined in the official specification, but they're plagued by spotty or no browser support, which reduces their usefulness substantially. If you're interested, though, do check out the official CSS2 specification, available at http://www.w3.org/TR/REC-CSS2

See you soon!

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