Lists: the 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style' properties
Written by jon on 11:53 AMThe list properties allow basic visual formatting of lists. As with more general markers, a element with 'display: list-item' generates a principal box for the element's content and an optional marker box. The other list properties allow authors to specify the marker type (image, glyph, or number) and its position with respect to the principal box (outside it or within it before content). They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position with respect to the principal box.
Furthermore, when a marker M (created with 'display: marker') is used with a list item created by the list properties, M replaces the standard list item marker.
With the list properties, the background properties apply to the principal box only; an 'outside' marker box is transparent. Markers offer more control over marker box style.
- 'list-style-type'
-
Value: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit Initial: disc Applies to: elements with 'display: list-item' Inherited: yes Percentages: N/A Media: visual
This property specifies appearance of the list item marker if 'list-style-image' has the value 'none' or if the image pointed to by the URI cannot be displayed. The value 'none' specifies no marker, otherwise there are three types of marker: glyphs, numbering systems, and alphabetic systems. Note. Numbered lists improve document accessibility by making lists easier to navigate.
Glyphs are specified with disc, circle, and square. Their exact rendering depends on the user agent.
Numbering systems are specified with:
- decimal
- Decimal numbers, beginning with 1.
- decimal-leading-zero
- Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
- lower-roman
- Lowercase roman numerals (i, ii, iii, iv, v, etc.).
- upper-roman
- Uppercase roman numerals (I, II, III, IV, V, etc.).
- hebrew
- Traditional Hebrew numbering.
- georgian
- Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
- armenian
- Traditional Armenian numbering.
- cjk-ideographic
- Plain ideographic numbers
- hiragana
- a, i, u, e, o, ka, ki, ...
- katakana
- A, I, U, E, O, KA, KI, ...
- hiragana-iroha
- i, ro, ha, ni, ho, he, to, ...
- katakana-iroha
- I, RO, HA, NI, HO, HE, TO, ...
A user agent that does not recognize a numbering system should use 'decimal'.
Note. This document does not specify the exact mechanism of each numbering system (e.g., how roman numerals are calculated). A future W3C Note may provide further clarifications.
Alphabetic systems are specified with:
- lower-latin or lower-alpha
- Lowercase ascii letters (a, b, c, ... z).
- upper-latin or upper-alpha
- Uppercase ascii letters (A, B, C, ... Z).
- lower-greek
- Lowercase classical Greek alpha, beta, gamma, ... (έ, ή, ί, ...)
This specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items, 'lower-latin' rendering is undefined. Therefore, for long lists, we recommend that authors specify true numbers.
For example, the following HTML document:
Lowercase latin numbering
- This is the first item.
- This is the second item.
- This is the third item.
might produce something like this:
i This is the first item.
ii This is the second item.
iii This is the third item.
Note that the list marker alignment (here, right justified) depends on the user agent.
Note. Future versions of CSS may provide more complete mechanisms for international numbering styles.
- 'list-style-image'
-
Value: | none | inherit Initial: none Applies to: elements with 'display: list-item' Inherited: yes Percentages: N/A Media: visual
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'
-
Value: inside | outside | inherit Initial: outside Applies to: elements with 'display: list-item' Inherited: yes Percentages: N/A Media: visual
This property specifies the position of the marker box in the principal block box. Values have the following meanings:
- outside
- The marker box is outside the principal block box. Note. CSS1 did not specify the precise location of the marker box and for reasons of compatibility, CSS2 remains equally ambiguous. For more precise control of marker boxes, please use markers.
- inside
- The marker box is the first inline box in the principal block box, after which the element's content flows.
For example:
Comparison of inside/outside position
- first list item comes first
- second list item comes second
- first list item comes first
- second list item comes second
The above example may be formatted as:
| Posted in »
