CSS Lists

CSS list properties are used 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

Lists

In HTML, there are two types of lists:

• Unordered list ul - List items are marked with special graphics (such as small black dots, small squares, etc.)
• Ordered list ol - List items are marked with numbers or letters

Using CSS, you can further style lists and use images as list item markers.

Unordered List Example:

• Coffee
• Tea
• Coca Cola
• Coffee
• Tea
• Coca Cola

Ordered List Example:

• Coffee
• Tea
• Coca Cola
• Coffee
• Tea
• Coca Cola

Different List Item Markers

The list-style-type property specifies the type of list item marker:

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; }

Some values are for unordered lists, and some are for ordered lists.

Image as 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');
}

The above example may display differently across browsers. IE and Opera may show the image marker slightly higher than Firefox, Chrome, and Safari.

If you want the same image marker in all browsers, you should use a browser compatibility solution, as follows:

Browser Compatibility Solution

The following example will display the image marker consistently across all browsers:

Example

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li {
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px;
    padding-left: 14px;
}

Example explanation:

• ul:
  • Set list type to have no list item markers
  • Set padding and margin to 0px (for browser compatibility)
• All li in ul:
  • Set the URL of the image and ensure it displays only once (no repeat)
  • Position the image (left 0px and 5px top and bottom)
  • Use padding-left to position the text within the list

List - Shorthand Property

You can specify all the list properties in one single property. This is called a shorthand property.

To use the shorthand property for lists, set the list style properties as follows:

Example

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

You can set the following properties in order:

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

If one of the values is missing, the rest will still be specified in the given order.

More Examples

All Different List Item Markers

Removing Default Settings

The list-style-type: none property can be used to remove the markers. By default, <ul> or <ol> also have padding and margin set, which can be removed using margin: 0 and padding: 0:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

All CSS List Properties