Problem You want to change the default list style; for example, to change the bullet or numbering, as in Figure 5-2. Figure 5-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 5-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 5-1. Bullet styles| 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 may be used for a 5,876-item list. | All major browsers | | lower-roman | Starts with lowercase roman numerals. | All major browsers | | upper-roman | Starts with uppercase roman numerals. | All major browsers | | lower-alpha | Starts with lowercase ASCII letters. | All major browsers | | upper-alpha | Starts with uppercase ASCII letters. | All major browsers | | lower-latin | Starts with lowercase ASCII letters. | All major browsers | | upper-latin | Starts with uppercase ASCII letters. | All major browsers | | lower-greek | Starts with classical Greek letters, starting with alpha and then beta, gamma, etc. | Safari, Mozilla, Netscape 6+ | | hebrew | Starts counting with traditional Hebrew. | Safari, Mozilla, Netscape 6+ | | hiragana | Starts counting with the Japanese hiragana system. | Mozilla, Netscape 6+ | | katakana | Starts counting with the Japanese traditional katakana system. | Mozilla, Netscape 6+ | | hiragana-iroha | Starts counting with the Japanese hiragana-iroha system. | Mozilla, Netscape 6+ | | katakana-iroha | Starts counting with the Japanese katakana-iroha system. | Mozilla, Netscape 6+ | | none | No marker is displayed. | All major browsers |
See Also Recipe 5.6 for using custom images for list markers; Chapter 12 in Cascading Style Sheets: The Definitive Guide, Second Edition by Eric A. Meyer (O'Reilly Media). |