The List-Style Property

The list-style property is a shorthand means of setting both the label and its position at the same time. Its values are the legal values of the list-style-type, list-style-image, and list-style-position properties. The following are examples:

 UL { list-style: disc inside } OL OL { list-style: circle outside } 

When you set a URL, it's a good idea to also set a keyword so that if the image cannot be displayed, the browser can display the symbol indicated by the keyword; for example:

 UL.files {   list-style: url("images/file.png") square } 

Using the list-style properties, you can create nested lists with a different numbering style at each level. Suppose you want to create a set of three nested lists. The labels of the first list are decimal: 1, 2, 3, and so on. The labels of the first nested list are upper-alpha: A, B, C, and so on. The labels of the second nested list are upper-roman: I, II, III, and so on. You would write three rules, two of which use contextual selectors:

 OL { list-style: decimal } OL OL { list-style: upper-alpha } OL OL OL { list-style: upper-roman } 

Here is the resulting list:

1. First item of the first list

2. Second item of the first list

3. Third item of the first list; start of the first nested list

   1. First item of the first nested list

   2. Second item of the first nested list; start of the second nested list

      1. First item of the second nested list

      2. Second item of the second nested list

      3. Third item of the second nested list

   3. Return to the first nested list; back to uppercase letters

4. Back to the first list; back to decimal numbers

5. Fifth and last item of the first list

Note how the numbers align. You cannot change the alignment of the numbers. Nor can you specify the distance between the number and the text. You can, however, control the distance of the text from the left margin by using the margin-left property, which we describe in Chapter 8, "Space Around Boxes."