Lists

Elements with a 'display' property value of 'list-item' are formatted as other block level elements, but preceded by a list-item marker. The type of marker and its placement is determined by the list properties described below.

For example: 

  <STYLE type="text/css">
    UL         { list-style: outside }
    UL.compact { list-style: inside }
  </STYLE>
  
  <UL>
    <LI>first list item comes first
    <LI>second list item comes second
  </UL>

  <UL class=compact>
    <LI>first list item comes first
    <LI>second list item comes second
  </UL>

The above example may be formatted as: 

  * first list item 
    comes first

  * second list item
    comes second


  * first list
  item comes first

  * second list
  item comes second

In right-to-left text, the markers would have been on the right side of the box.

List properties

'list-style-type'

This property is used to determine the appearance of the list-item marker if 'list-style-image' is 'none' or if the image pointed to by the URL cannot be displayed.

The possible values have the following meanings:

disk
A disc (exact presentation is UA-dependent)
circle
A circle (exact presentation is UA-dependent)
square
A square (exact presentation is UA-dependent)
decimal
Decimal numbers, beginning with 0.
lower-roman
Lower case roman numerals (i, ii, iii, iv, v, etc.)
upper-roman
Upper case roman numerals (I, II, III, IV, V, etc.)
lower-alpha
Lower case ascii letters (a, b, c, ... z)
upper-alpha
Upper case ascii letters (A, B, C, ... Z)
none
No list marker

For example, the following HTML document: 

<STYLE>
  OL { list-style-type: lower-roman }   
</STYLE>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>

might produce something like this: 

  i This is the first item.
 ii This is the second item.
iii This is the third item.

'list-style-image'

This property sets the image that will be used as the list-item marker. When the image is available it will replace the marker set with the 'list-style-type' marker.

The following example sets the marker at the beginning of each list item to be the image "ellipse.png". 

  UL { list-style-image: url(http://png.com/ellipse.png) }

'list-style-position'

The value of 'list-style-position' determines how the list-item marker is drawn with regard to the content.

'list-style'

The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image', and 'list-style-position' at the same place in the style sheet. 

  UL { list-style: upper-roman inside }
  UL UL { list-style: circle outside }
  LI.square { list-style: square }

Setting 'list-style' directly on LI elements in HTML can have unexpected results. Consider:

DEPRECATED EXAMPLE:

  <STYLE type="text/css">
    OL.alpha LI  { list-style: lower-alpha }
    UL LI        { list-style: disc }
  </STYLE>
  <BODY>
    <OL class=alpha>
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>

Since the specificity (as defined in the cascading order is higher for the first rule in the style sheet in the example above, it will override the second rule on all LI elements and only 'lower-alpha' list styles will be used. It is therefore recommended that 'list-style' only be set on the list type elements: 

  OL.alpha  { list-style: lower-alpha }
  UL        { list-style: disc }

In the above example, inheritance will transfer the 'list-style' values from OL and UL elements to LI elements.

A URL value can be combined with any other value, as in: 

  UL { list-style: url(http://png.com/ellipse.png) disc }

In the example above, the 'disc' will be used when the image is unavailable.