Understanding Style Sheets (part 2) - Going Shopping (
Page 6 of 8 )
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.
/ 25 
