Chapter 9. List Properties
In Chapter 8, you saw how the
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:
list-style-typeproperty and how it's used to present different types of lists through a variety of marker styles for bulleted lists and numbered lists
list-style-imageproperty and how it's used to provide a custom marker for each list item
list-style-positionproperty 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 ...