|
|
|
Cascading Style Sheets: an Interactive Tutorial
Lists
advertisement advertisement Do you remember your old friends UL (unordered list) and OL (ordered list)? Cascading style sheets have a few enhancements for these lists. Most people have wanted a way to use an image for each point of an unordered list. Cascading style sheets make this trick really easy to do. Make a small graphic (background transparent are preferred). Then you can link to it with a style similar to this: ul { list-style-image: url(smallimage.gif); } But what if you have a sub-list, that is, a UL within a UL. You don't want the second one to have the same image? You can define a special style for UL only within UL, similar to this: ul ul { list-style-image: url(smallimage2.gif); } If you use both styles in the same sheet, the points of the main list will be preceded by smallimage.gif, and the points in the sublist will be preceded by smallimage2.gif. You can continue on, adding more UL as you please. Just don't go too deep into sub-lists, you'll confuse your viewing audience! Remember all those fun outlines you did in school (or maybe the one you did this morning on the job)? CSS gives you a way to auto-format your ordered lists to meet nearly any style. It's similar to the list-style-image used above, it's called the list-style-type property. It can be one of these values: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none. So, if you want the OL to have I, then A, then 1. then, a, then finally i., you could do this style sheet:
OL { list-style-type: upper-roman; }
<ol>
<li>Web Design
<ol>
<li>HTML
<li>CSS
<ol>
<li>Intro
<li>Basics
<ol>
<li>Inline
<ol>
<li>You can include styles
inline using style=""
</ol>
</ol>
</ol>
</ol>
</ol>
It looks like this:
advertisement
|
|
Copyright © 2002 Dave Kristula. All Rights Reserved.
