Cascading Style Sheets/Lists

W3C Specification CSS1 CSS2.1

The 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.         <li style="list-style-image:none;list-style-type:decimal-leading-zero">, defined in CSS2.1.</li> <li style="list-style-image:none;list-style-type:lower-latin">, defined in CSS2.1.</li> <li style="list-style-image:none;list-style-type:upper-latin">, defined in CSS2.1.</li> <li style="list-style-image:none;list-style-type:armenian">, defined in CSS2.1 but liable to be removed</li> <li style="list-style-image:none;list-style-type:georgian">, defined in CSS2.1 but liable to be removed.</li> <li style="list-style-image:none;list-style-type:lower-greek">, defined in CSS2.1 but liable to be removed.</li> <li style="list-style-image:none;list-style-type:none"></li>

can be applied to the list container element ( or   in HTML) as well as to the list item element (  in HTML).

CSS rules:

Sample HTML:

Example rendering:

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.

Example rendering:

W3C Specification CSS1 CSS2.1

The property allows you to specify an image to use as the bullet for list items. The value is either a URI or. When the value is the bullet will be set by the  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 property.

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

CSS rules:

Sample HTML:

Example rendering:

W3C Specification CSS1 CSS2.1

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

CSS rules:

Sample HTML:

Example rendering &#8211; notice where the text wraps to relative to the bullet and the border.

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.

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.

Shorthand property
W3C Specification CSS1 CSS2.1

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

The rule is equivalent to

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

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

CSS/Liste