CSS-Lesson 13

Lists

The list-style-type property

Without styling, lists are of two types, ordered (with numerals) and unordered (with bullets). Styling allows you a much wider selection.

disc*	circle	square	decimal*	decimal-leading-zero	upper-alpha
item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4

lower-alpha	upper-roman	lower-roman	lower-greek	hebrew	armenian
item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4

georgian	cjk-ideographic	hiragana	katakana	hiragana-iroha	none
item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4	item 1 item 2 item 3 item 4

Note that there are two default values, one (disc) for the 'ul' tag and one (decimal) for the 'ol' tag. Either tag may be used with any of these style-types.

The list-style-image property

As if there was insufficient choice of list styles, you can make up your own bullet:
<ul style="list-style-image:url(AR.gif);">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
Gives the following list:

• item 1
• item 2
• item 3
• item 4