Chapter 9. List Properties

In Chapter 8, you saw how the float and clear properties are used to control the flow of content in a web document. In this chapter, I look at properties used to control the styling of list elements. I cover the following:

  • The list-style-type property and how it's used to present different types of lists through a variety of marker styles for bulleted lists and numbered lists

  • The list-style-image property and how it's used to provide a custom marker for each list item

  • The list-style-position property and how it's used to control the positioning of list item markers

Like the CSS properties I covered in previous chapters, the CSS list properties give you complete control over the way you present and style list items.

The list-style-type Property

You use the list-style-type property to change the presentation of bulleted and numbered lists. For example, you can change an ordered list to a list using Roman numerals for markers, or you can change a bulleted list to one using squares instead of circles for markers. The following table outlines the list-style-type property and its possible values (as of CSS 2.1).




disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none

Initial value: disc

IE 6 and IE 7 support only CSS 1 keyword values: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none.

Naturally, the ...

Get Beginning CSS: Cascading Style Sheets for Web Design, Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.