CSS Lists

CSS Lists

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

---

List

In HTML, there are two types of lists:

• unordered lists (
  ) - the list items are marked with bullets
• ordered lists (
  ) - the list items are marked with numbers or letters

With CSS, lists can be styled further, and images can be used 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;
}

 

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

---

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

 

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

ul li {
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px center;
    padding-left: 15px;
}

 

Example explained:

• For
  :
  • 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 all
• in
  :
  • Set the URL of the image, and show it only once (no-repeat)
  • Position the image where you want it (left 0px and vertical value: center)
  • Position the text in the list with padding-left

---

List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example

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

 

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

• list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the missing property will be inserted, if any.