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

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

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