HTML and CSS Reference
In-Depth Information
Changing the Symbol or Number
e list-style-type property controls the symbol or number for both unordered and ordered lists.
Unordered Lists
When used with unordered lists, list-style-type of ers a choice of just three symbols: disc (default), circle ,
and square . Figure 10-2 shows what they look like in Safari on Mac OS X (see list_type_ul.html).
Figure 10-2. h
ere's a limited choice of symbols for unordered lists
Th e symbol uses the same color as the text. Th ere's no mechanism for changing the color of the symbol other
than to wrap the content of each list item in a <span> like this:
<li>< span >Beginning CSS3</ span ></li>
<li>< span >The Definitive Guide to HTML5</ span ></li>
<li>< span >PHP Solutions</ span ></li>
en create two style rules, one for the list, and the other for the <span> elements:
ul {
list-style-type: square;
color: #F00;
li span {
color: #000;
Th is uses red squares as the bullet symbol and displays the text in black. However, wrapping every list item
in <span> elements is an ugly hack. A better solution is to use an image to replace the symbol, as described later in
this chapter.
Ordered Lists
Th ere's a much wider choice of symbols for ordered lists. All browsers except IE 6 and IE 7 support the 11
keywords listed in the CSS2.1 specication: decimal (default), decimal-leading-zero , lower-roman ,
upper-roman , lower-greek , lower-alpha , upper-alpha , lower-latin , upper-latin , armenian , and georgian .
Figure 10-3 shows the sequences each keyword produces (see list_type_ol.html).
As you can see in Figure 10-3 , lower-alpha and lower-latin are synonymous, as are upper-alpha and
upper-latin . However, it's better to use lower-alpha and upper-alpha because IE 6 and IE 7 support only
decimal , lower-roman , upper-roman , lower-alpha , and upper-alpha . For all other keywords, they revert to the
default decimal (1, 2, 3, and so on).
Search WWH ::

Custom Search