O'Reilly logo

Cascading Style Sheets: The Definitive Guide by Eric A. Meyer

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

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.

Bullets

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.

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

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