• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Lists > Changing the Format of a List

Recipe 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

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 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 4.5 for using custom images for list markers; Chapter 12, "Lists and Generated Content" in Cascading Style Sheets: The Definitive Guide (O'Reilly).

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint