Styling lists with CSS

Lists can be styled with CSS, making it easy to amend item spacing or create custom bullet
points. I tend to think bullet points work well for lists. They’re simple and—pardon the
pun—to the point. However, I know plenty of people would rather have something more
visually interesting, which is where the list-style-image property comes in.list-style-image property
The list-style-image property replaces the standard bullet or number from an
unordered or ordered list with whatever image you choose. If you set the following in your
CSS, the resulting list will look like that shown to the right. (Note that this is the nested list
created earlier in this chapter.)
ul {
list-style-image: url(bullet.gif);
}

 

Contextual selectors were first mentioned in Chapter 1
(see the section “Types of CSS selectors”). These enable
you to style things in context, and this is appropriate when working with lists. You can style
list items with one type of bullet and nested list items with another. The original rule stays
in place but is joined by a second rule:
ul {
list-style-image: url(bullet.gif);
}
ul ul {
list-style-image: url(bullet-level-two.gif);
}

 

This second rule’s selector is ul ul, which means that the declaration is applied only to
unordered lists within an unordered list (i.e., nested lists). The upshot is that the top-level
list items remain with the original custom bullet, but the nested list items now have a different
bullet graphic.
With this CSS, each subsequent level would have the nested list bullet point, but it’s feasible
to change the bullet graphic for each successive level, by using increasingly complex
contextual selectors.

**Note :When using custom bullet images, be wary of making them too large. Some browsers
clip the bullet image, and some place the list contents at the foot of the image. In all
cases, the results look terrible.