Next / Previous / Contents / TCC Help System / NM Tech homepage

17. The list properties

You can customize the appearance of HTML ul (unnumbered or “bullet” list) and ol (ordinal or numbered list) elements with the CSS properties below.

17.1. The list-style-type property

Some of the choices below apply to unnumbered lists and some to numbered lists:

  • circle: Display an empty circle before each list element.

  • disc: Display a filled circle before each list element.

  • square: Display a square before each list element.

  • decimal: Display an item number in decimal numerals before each list element: 1, 2, 3, ….

  • lower-alpha: Items in a list are numbered as a, b, c, ….

  • upper-alpha: Items in a list are numbered as A, B, C, ….

  • lower-roman: Items in a list are numbered as lowercase Roman numerals: i, ii, iii, iv, ….

  • upper-roman: Items in a list are numbered as uppercase Roman numerals: I, II, III, IV, ….

In addition to the options shown above, there are options specific to Hebrew, Georgian, Armenian, Chinese, Japanese, and Korean languages. Refer to the standard for full details.

17.2. The list-style-image property

You can use the list-style-image property to display an image of your choice in place of the bullet in a bullet list, or suppress the bullet altogether. This property takes precedence over the list-style-type property described above.

  • none: If you set list-style-image: none for a list item, no bullet will be displayed in front of that list item.

  • url(u): Display the image located at URI u in place of the bullet.

17.3. The list-style-position property

Normally, the second and following lines of a list item will start lined up vertically with the text on the first line, that is, after the bullet or section number. The bullet will appear in its own vertical space outside the list text.

This behavior is selected by setting list-style-position: outside.

However, if you set list-style-position: inside, the second and following lines will start lined up with the left edge of the bullet (or section number); that is, the bullet or section number will be run into the text.

17.4. The list-style property

You can set more than one of the above list properties in a single rule by setting the list-style property to a list of values allowed for the list-style-position, list-style-image, and list-style-type properties.

For example, this rule

  ul.pterry { list-style: disc inside; }

would display any list tagged as ul class='pterry' using disc-shaped bullets run in to the text.

17.5. The marker-offset property

In a list, the item that appears before the first line of the list is called the marker. You can use the marker-offset property to specify the horizontal distance between the marker and the first line. The value of this property is a dimension (see Section 6.1, “Dimensions”). For example, the declaration marker-offset: 2em; would insure that two ems of space separate the marker from the first line of the list item.