Adjusting List Properties with CSS
Cascading Style Sheets introduce a few extra list-formatting possibilities, as Table 52.2 shows.
| ATTRIBUTE | CONTROLS | POSSIBLE VALUES | EXAMPLE |
|---|---|---|---|
| list-style-image | The image to display in place of a bullet or leading character | url(imagepath), none | ul {
list-style-image: url(../images/bullet.gif); } |
| list-style-position | The position of the bullet or leading character in the list items | inside, outside relation to | ol {
list-style-position: inside; } |
| list-style-type | The type of bullet or leading character to display | disc, circle, square, decimal, lower-roman, uppper-roman, lower-alpha, upper-alpha, none | ol {
list-style-type: lower-roman; } |
Replacing Bullets with an Image
Probably the most fun of these attributes ...
Get Web Design Garage now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
