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
| Starts with lowercase roman numbers . | All major browsers | upper-roman
| Starts with uppercase roman numbers. | 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 katana 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 4.5 for using custom images for list markers; Chapter 12, "Lists and Generated Content" in Cascading Style Sheets: The Definitive Guide (O'Reilly). |
