HTML and CSS Reference
In-Depth Information
Changing the Symbol or Number
h
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:
<ul>
<li><
span
>Beginning CSS3</
span
></li>
<li><
span
>The Definitive Guide to HTML5</
span
></li>
<li><
span
>PHP Solutions</
span
></li>
</ul>
en create two style rules, one for the list, and the other for the
<span>
elements:
h
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).
