Delphinidin

Lists are a very versatile group of elements in HTML, used for all sort of things, such as site and page navigation, tab controls, and simple lists of items such as for tasks or shopping basket contents. Lists consist of two parts. The first is the list container element, which is either <ul> for lists without any particular order or <ol> for lists that have a specifi c order to the items within it, and in which the order matters.

The second part of a list is one or more <li> elements, which contains each item. There must be at least one <li> in every list. There is no maximum number of items, but very long lists can be hard to read and are best broken up into sections. The most common example of an unordered list in modern websites is site navigation. Navigation is a list of links, but while they will have a visual order, they don’t usually have a fixed order that is integral to the content — they make sense in any order.

THE LIST-STYLE-TYPE PROPERTY
The list-style-type property changes the style of the bullet or format of the number that precedes each list item. 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 code outlines the list-style-type property and its possible values (as of CSS 2.1).

{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 for unordered list: disc
Initial value for unordered list: decimal

It is possible to style an unordered list with styles that suggest an order (for example list-style-type: decimal); but I strongly advise against this, as the styling of an element should follow the semantics implied in the markup. If it looks like an ordered list, it should be an ordered list.

- Styling Unordered Lists
There are four styles for unordered list bullets: disc, circle, square, and none. The default value is disc. All major browsers support these values.

- Styling Ordered Lists
The number that precedes list items in an ordered list can be formatted with the following keywords: de cimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, Armenian, georgian, none. The default value is decimal. Support for the full range of ordered list styles is not as complete as the styles for ordered lists:

+ Armenian is not supported by Safari, Firefox, or Opera for Mac OS X.
+ Decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, and Georgian are not supported by IE6 or IE7.

This means that just like unordered lists, there are ultimately four keywords that can be reliably used across all major browsers: decimal, lower-roman, upper-roman, none.

THE LIST-STYLE-IMAGE PROPERTY
As with the li st-style-type property, you can use the list-style-image property to change the marker used for list items. The following code outlines the list-style-image property and its possible values.

{list-style-image: <uri> | none;}
Initial value: none

The list-style-image property is quite straightforward; it accepts the URLof the image, which is denoted in the preceding code by the <uri> notation.

THE LIST-STYLE-POSITION PROPERTY
You can use the list-style-position property to control the placement of list item markers and whether the list item marker appears on the inside of the list item element or outside of it. Where the list marker is placed is only obvious when the <li> element has a border. The following code outlines the list-style-position property and its possible values.

{list-style-position: inside | outside;}
Initial value: outside

You can highlight the effects of the list-style-position property.

THE LIST-STYLE SHORTHAND PROPERTY
Like the shorthand properties I presented in previous posts, the list-style shorthand property allows multiple properties to be combined into one property. The following table outlines the list-style shorthand property and the values it allows.

{list-style: <’list-style-type’> || <’list-style-position’> || <’list-style-image’>;}
Initial value: n/a

The list-style property enables you to specify from one to three values, with each value corresponding to the list style properties I have discussed throughout this chapter: list-style-type, list-style-image, and list-style-position.