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:

By: icarus, (c) Melonfire

Poor Best

Rating:

/ 25

October 04, 2000

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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!