CSS Cookbook

4.1. Changing the Format of a List

Problem

You want to change the default list style, for example to change the bullet or numbering as in Figure 4-2.

Figure 4-2. The list markers changed to lowercase Roman numerals

Solution

Use the list-style-type property to change the bullet or type of counter:

li {
 list-style-type: lower-roman;
}

Discussion

The CSS 2.1 specification offers several styles for numbering a list, as shown in Table 4-1. Browsers typically vary the bullet style from one level of nesting to the next. To stop lists from presenting this traditional system of setting the list marker, change the value of list-style-type for each child list.

Table 4-1. Styles available for list markers

Style/value	Description	Browser support
square	Usually a filled-in square, although the exact representation isn’t defined.	All major browsers
disc	Usually a filled-in circle, although the exact representation isn’t defined.	All major browsers
circle	Usually an unfilled circle, although the exact representation isn’t defined.	All major browsers
decimal	Starts with 1 and continues with 2, 3, 4, etc.	All major browsers
decimal-leading-zero	Starts with 01 and continues with 02, 03, 04, etc. The number of leading zeros may equal the number of digits used in a list. For example, 0001 might be used for a 5876-item list.	All major browsers, although leading zeros is optional
lower-roman ...