Cascading Style Sheets: The Definitive Guide

Lists

There are a total of three properties that can affect the display of a list item under CSS1— CSS2 adds a few more, all of which are mentioned in Chapter 10 —and one shorthand property to tie them all together. These properties are used to affect the type of bullet used in a list, to replace the bullet with an image, and to affect where the bullet or image appears in relation to the text of the list item.

Just in case you’re unfamiliar with the concept of a “bullet,” it’s the little decoration to the side of a list item, as depicted in Figure 7-79.

Figure 7-79. Bullets

In an unordered list, these will be little symbols, but in an ordered list, the bullet could be a letter or number.

Types of Lists

This part will probably seem very familiar to those of you who have been fiddling with lists in HTML. In order to change the type of counter or bullet used for a list’s items, you would use the list-style-type.

list-style-type

Values

disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman | none

Initial value

disc

Inherited

yes

Applies to

list-item elements

The meaning of these values is shown in Table 7-1.

Table 7-1. Values of the list-style property and their results

Keyword	Effect
disc	use a disc (usually a filled circle) for list item bullets
circle	use a circle (usually open) for bullets
square	use a square (filled or open) for bullets