CSS Lists

March 24, 2008

We've seen in the HTML list tutorial that unordered lists display bullet points by default and ordered lists display numbers.

CSS offers a handful of properties to customize the look of your lists; from pre-defined values to using your own list item images.

List style type

To change the default list item marker you can apply one of the different pre-defined values to the list-style-type property. For unordered lists the default is disc, for ordered lists it's decimal.

Here's a list of all the possible values you can use for unordered lists:

List style typeDisplay

none

  • item 1
  • item 2

disc

  • item 1
  • item 2

circle

  • item 1
  • item 2

square

  • item 1
  • item 2

And here are the ordered list styles:

List style typeDisplay

decimal

  1. item 1
  2. item 2

decimal-leading-zero

  1. item 1
  2. item 2

lower-roman

  1. item 1
  2. item 2

upper-roman

  1. item 1
  2. item 2

lower-alpha

  1. item 1
  2. item 2

upper-alpha

  1. item 1
  2. item 2

lower-greek

  1. item 1
  2. item 2

lower-latin

  1. item 1
  2. item 2

upper-latin

  1. item 1
  2. item 2

There are some more exotic ordered list styles you can use such as hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha and katakana-iroha.

List style images

If you're not happy with the preset CSS list styles you can use your own images as list marker by setting the list-style-image property to url(...) where ... is the path to your image file (without quotes). If your image is not completely covering the default list style marker you can hide it by setting list-style-type:none.

CSS list-style-image:

  • ul {list-style-image:url(ul-marker.gif)}
  • ol {list-style-image:url(ol-marker.gif)}

Display:

An unordered list with images:

  • item 1
  • item 2

An ordered list with images:

  1. item 1
  2. item 2

If the image is bigger than the list item it's sometimes necessary to adjust the list item padding to properly center the image. Although this example uses images for the ordered list it is not recommended doing so because of the numbering that will be lost.

List style position

With list-style-position you can place the list marker either outside of the list item (default) or inside.

CSS list-style-position:

  • ul {list-style-position:outside}
  • ol {list-style-position:inside}
  • li {border:1px dashed #000}

Display:

  • The list marker is outside of
  • the list items with the green border.
  1. The list marker is inside of
  2. the list items with the green border.

Shorthand notation

Thankfully CSS also provides a shorthand notation for lists. You can cram all list properties into a single list-style:type position image rule. You don't have to specify all 3 values but omitting one will reset it to the default value.

CSS list-style:

  • ul {list-style:none inside url(ul-marker.gif)}
  • ol {list-style:square}
  • li {border:1px dashed #000}

Display:

  • item 1
  • item 2

An ordered list with images:

  1. item 1
  2. item 2