Cascading Style Sheets/Lists

list-style-type

W3C Specification CSS1 CSS2.1

The list-style-type property sets the marker used at the start of a list item. The marker may be a counter or a bullet point. Several different bullet points are available. The values defined in CSS1 or CSS2.1 are shown in the list below. The marker for each value in the list should be rendered in that style. Your browser may not support all the bullet types, in which case you will probably see a disc in place of any unsupported values.

disc

circle

square

decimal

lower-roman

upper-roman

lower-alpha

upper-alpha

decimal-leading-zero, defined in CSS2.1.

lower-latin, defined in CSS2.1.

upper-latin, defined in CSS2.1.

armenian, defined in CSS2.1 but liable to be removed

georgian, defined in CSS2.1 but liable to be removed.

lower-greek, defined in CSS2.1 but liable to be removed.

none

list-style-type can be applied to the list container element (ul or ol in HTML) as well as to the list item element (li in HTML). CSS rules:

ul {
  list-style-type:disc
}

Sample HTML:

    <ul>
      <li>Item A</li>
      <li>Item B
        <ul>
          <li>Item B1</li>
          <li>Item B2
            <ul>
              <li>Item B2a</li>
              <li>Item B2b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

Example rendering:

• Item A
• Item B
  • Item B1
  • Item B2
    • Item B2a
    • Item B2b

Notice that all the bullets in the sub-lists are discs. If you want sub-lists to have different types you need extra rules, e.g.

ul {
  list-style-type:disc
}

ul ul {
  list-style-type:circle
}

ul ul ul {
  list-style-type:square
}

Example rendering:

• Item A
• Item B
  • Item B1
  • Item B2
    • Item B2a
    • Item B2b

list-style-image

W3C Specification CSS1 CSS2.1

The list-style-image property allows you to specify an image to use as the bullet for list items. The value is either a URI or none. When the value is none the bullet will be set by the list-style-type property. When it is a URI the web browser will attempt to load the image from the given URI. If it succeeds it will use the image as the bullet. If it fails it will use the bullet specified by the list-style-type property.

The example below shows a list with alternating red and green bullets.

CSS rules:

li.odd{
  list-style-image: url(green_bullet.gif)
}

li.even {
  list-style-image: url(red_bullet.gif)
}

Sample HTML:

    <ul>
      <li class="odd">Item 1</li>
      <li class="even">Item 2</li>
      <li class="odd">Item 3</li>
      <li class="even">Item 4</li>
    </ul>

Example rendering:

• Item 1

• Item 2

• Item 3

• Item 4

list-style-position

W3C Specification CSS1 CSS2.1

The list-style-position property determines whether the bullet for a list item is considered part of the content of the list item (inside) or is placed outside the block (outside). Most web browsers place the bullet outside for (X)HTML lists.

CSS rules:

li {
  border: 1px solid red
}

ul#inner {
  list-style-position: inside
}

ul#outer {
  list-style-position: outside
}

Sample HTML:

    <p>The first list has the bullets on the inside.&lt;/p>
    <ul id="inner">
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
    </ul>
    <p>The second list has the bullets on the outside. This is the default.&lt;/p>
    <ul id="outer">
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
    </ul>

Example rendering – notice where the text wraps to relative to the bullet and the border.

The first list has the bullets on the inside.

• This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line.
• This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line.
• This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line.

The second list has the bullets on the outside. This is the default.

• This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line.
• This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line.
• This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line. This text needs to be long enough to wrap on to the next line.

The next example shows how altering the margin or padding affects the position of the bullet when the bullet is inside. Since the bullet is inside the content the padding appears between the border and the bullet.

• Margin 0
• Margin 1em
• Margin 2em
• Padding 0
• Padding 1em
• Padding 2em

The next example shows how altering the margin or padding affects the position of the bullet when the bullet is outside. Since it is outside the content in remains in the same place relative to the border.

• Margin 0
• Margin 1em
• Margin 2em
• Padding 0
• Padding 1em
• Padding 2em

Shorthand property

W3C Specification CSS1 CSS2.1

The list-style shorthand property can be used to set all three individual list style properties in a single declaration.

The rule

ul {
  list-style:circle url(wavy_circle.png) inside
}

is equivalent to

ul {
  list-style-type:circle;
  list-style-image:url(wavy_circle.png);
  list-style-position:inside
}

The individual properties may be given in any order, so the following declarations are all equivalent.

  list-style:circle url(wavy_circle.png) inside;
  list-style:url(wavy_circle.png) circle inside;
  list-style:inside circle url(wavy_circle.png);

If any of the individual properties are omitted they are set to their initial values. For example

ul {
  list-style:url(wavy_circle.png)
}

is equivalent to

ul {
  list-style-image:url(wavy_circle.png);
  list-style-type:disc; /* initial value */
  list-style-position:outside /* initial value */
}