Beginning CSS: Cascading Style Sheets for Web Design, Second Edition

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

Property	Value
list-style-type	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 ...