The CSS Lists properties

In HTML, there are two types of lists:

1. unordered lists - the list items are marked with bullets
2. ordered lists - the list items are marked with numbers or letters

The CSS list properties allow you to:

• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker

Different List Item Markers
The type of list item marker is specified with the list-style-type property:

Example

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type:lower-alpha;}

An Image as The List Item Marker

To specify an image as the list item marker, use the list-style-image property.

Example:

ul
{
list-style-image: url('sqpurple.gif');
}

Note: The example above does not display equally in all browsers. IE and Opera will display the image-marker a little bit higher than Firefox, Chrome, and Safari.

If you want the image-marker to be placed equally in all browsers, a crossbrowser solution is explained below.

Crossbrowser Solution

The following example displays the image-marker equally in all browsers:

Example

ul
{

list-style-type: none;
padding: 0px;
margin: 0px;

}
li
{

background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;

}

Explaination for above example:

• For ul:
• Set the list-style-type to none to remove the list item marker
• Set both padding and margin to 0px (for cross-browser compatibility)
• For li:
• Set the URL of the image, and show it only once (no-repeat)
• Position the image where you want it (left 0px and down 5px)
• Position the text in the list with padding-left

List - Shorthand property

It is also possible to specify all the list properties in one, single property. This is called a shorthand property. The shorthand property used for lists, is the list-style property:
Example

ul
{
list-style: square url("sqpurple.gif");
}

Note: When using the shorthand property, the order of the values are:

• list-style-type
• list-style-position (for a description, see the CSS properties table below)
• list-style-image

Tip: It does not matter if one of the values above are missing, as long as the rest are in the specified order.