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 ...
Get Beginning CSS: Cascading Style Sheets for Web Design, Second Edition 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.