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 property values are for unordered lists, and some for ordered lists.

Values for Unordered Lists

Value	Description
none	No marker
disc	Default. The marker is a filled circle
circle	The marker is a circle
square	The marker is a square

Values for Ordered Lists

Value	Description
armenian	The marker is traditional Armenian numbering
decimal	The marker is a number
decimal-leading-zero	The marker is a number padded by initial zeros (01, 02, 03, etc.)
georgian	The marker is traditional Georgian numbering (an, ban, gan, etc.)
lower-alpha	The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek	The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin	The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman	The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha	The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin	The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman	The marker is upper-roman (I, II, III, IV, V, etc.)

Note: IE8, and earlier, support the property values "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian", "georgian", or "inherit" only if a DOCTYPE is specified!

---

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; } li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }

Example explained:

• 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"); }

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

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

---

All CSS List Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Property	Description	Values	CSS
list-style	Sets all the properties for a list in one declaration	list-style-type list-style-position list-style-image inherit	1
list-style-image	Specifies an image as the list-item marker	URL none inherit	1
list-style-position	Specifies if the list-item markers should appear inside or outside the content flow	inside outside inherit	1
list-style-type	Specifies the type of list-item marker	none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman inherit