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). |