Going Shopping - 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

If you're the kind of person who likes lists, CSS has something for you too - two properties which let you alter the appearance of the list item marker. First, there's the "list-style-type" property, which accepts the values "disc", "circle", "square", "decimal", "lower-roman", "upper-roman", "lower-alpha", "upper-alpha" or "none". Take a look:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
LI {list-style-type: square}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI>One 
tube toothpaste
<LI>One can catfood
<LI>One blue cheese
<LI>One white 
goat
<LI>Two dozen bat wings
</OL>
</BODY>
</HTML>

You can also use a custom image instead of the default bullets with the "list-style-image" property - like this:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
LI {list-style-image: url("http://www.mysite.com/bullet.gif")}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI>One 
tube toothpaste
<LI>One can catfood
<LI>One blue cheese
<LI>One white 
goat
<LI>Two dozen bat wings
</OL>
</BODY>
</HTML>

Note that Netscape Navigator does not yet support these properties.

Next: The View From The Top >>