O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Changing the Format of a List

Problem

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

The default rendering of a list

Figure 6-1. The default rendering of a list

The list markers changed to lowercase roman numerals

Figure 6-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 6-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 6-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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required