home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Book HomeCascading Style Sheets: The Definitive GuideSearch this book

7.7. 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, "CSS2: A Look Ahead" -- 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

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.

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



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

Initial value




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




use a disc (usually a filled circle) for list item bullets


use a circle (usually open) for bullets


use a square (filled or open) for bullets


1, 2, 3, 4, 5, ...


A, B, C, D, E, ...


a, b, c, d, e, ...


I, II, III, IV, V, ...


i, ii, iii, iv, v, ...


use no bullet

These properties can only be applied to any element that has a display of list-item , of course, but CSS doesn't distinguish between ordered and unordered list items. Thus, you might be able to set an ordered list to use discs instead of numbers. In fact, the default value of list-style-type is disc, so you might theorize that without explicit declarations to the contrary, all lists (ordered or unordered) will use discs as the bullet for each item. In fact, that's up to the user agent to decide. Even if the user agent doesn't have a predefined rule such as OL {list-style-type: decimal;}, it may prohibit ordered bullets from being applied to unordered lists, and vice versa. You can't count on this, of course, so be careful.

If you wish to suppress the display of bullets altogether, then none is the value you seek. none will cause the user agent to refrain from putting anything where the bullet would ordinarily be, although it does not interrupt the counting in ordered lists. Thus, the following markup would have the result shown in Figure 7-80:

OL LI {list-style-type: decimal;}
LI.off {list-style-type: none;}

<LI>Item the first
<LI CLASS="off">Item the second
<LI>Item the third
<LI CLASS="off">Item the fourth
<LI>Item the fifth
Figure 7-80

Figure 7-80. Switching off list-item markers

list-style-type is inherited, so if you want to have different styles of bullet in nested lists, you'll need to define them individually. You may also have to explicitly declare styles for nested lists because the user agent's style sheet may already have defined such styles. Assume that a UA has the following styles defined:

UL {list-style-type: disc;}
UL UL {list-style-type: circle;}
UL UL UL {list-style-type: square;}

If this is so, and it's likely that it will be, you will have to declare your own styles to overcome the UA's styles. Inheritance won't be enough in such a case.

7.7.2. List Item Images

Sometimes, of course, a pregenerated bullet just won't do. Instead, you feel the need to use an image for each bullet. In the past, the only way to achieve this sort of effect was to fake it. Now all you need is a list-style-image declaration.



<url> | none

Initial value




Applies to

list-item elements

Here's how it works:

UL LI {list-style-image: url(ohio.gif);}

Yes, that's really all there is to it. One simple url value, and you're putting images in for bullets, as you can see in Figure 7-81.

Figure 7-81

Figure 7-81. Using images as bullets

Of course, you should exercise care in the images you use, as this example makes painfully clear (shown in Figure 7-82):

UL LI {list-style-image: url(big-ohio.gif);}
Figure 7-82

Figure 7-82. Using really big images as bullets

You should usually provide a fallback for the bullet type. Do this just in case your image doesn't load, or gets corrupted, or is in a format that some user agents might not be able to display (as is the case in Figure 7-83). Therefore, you should always define a backup list-style-type for the list:

UL LI {list-style-image: url(ohio.bmp); list-style-type: square;}
Figure 7-83

Figure 7-83. Providing fallbacks for unusable images

The other thing you can do with list-style-image is set it to the default value of none. This is good practice because list-style-image is inherited -- so any nested lists will pick up the image as the bullet, unless you prevent this from happening:

UL {list-style-image: url(ohio.gif); list-style-type: square;}
UL UL {list-style-image: none;}

Since the nested list inherits the item type square but has been set to use no image for its bullets, squares are used for the bullets in the nested list, as shown in Figure 7-84.

Figure 7-84

Figure 7-84. Switching off image bullets in sublists


Remember that this may not be true in the real world: a user agent may have already defined a list-style-type for UL UL, so the value of square won't be inherited after all. Your browser may vary.

In the case of ordered lists, CSS2 goes a great deal further than CSS1 to provide control over the ordering. For example, there is no way in CSS1 to automatically create subsection counters such as "2.1" or "7.1.3." This can, however, be done under CSS2 and is briefly discussed in Chapter 10, "CSS2: A Look Ahead".

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.