Tutorials Bugs Masterclass Free stuff Test pages Proposals

Basic concepts

Advanced concepts

RichInStyle.com CSS2 tutorial - Lists

Contents

List properties

List-style-type

List-style-position

List-style-image

List-style

List properties

All list properties are inherited, and thus if applied to OL will inherit to list items inside that OL. However, properties applied to BODY will be overridden by the browser style sheet, since browser style sheets have OL {list-style: decimal} and UL {list-style: disc}.

Specifying style on OL and UL is to be preferred to specifying properties on OL LI, since, for example, OL.class LI {x: y} would override UL LI {x: z} in <OL class="class"> <UL> <LI> </UL> </OL> because it has greater specificity.

IE 3 does not support list style properties.

List-style-type

The values are:

  1. decimal (1, 2, 3)
  2. decimal-leading-zero (01, 02, 03 ... 0100)
  3. lower-roman (i, ii)
  4. upper-roman (I, II)
  5. lower-alpha (a, b, c)
  6. upper-alpha (A, B, C)
  7. none
  8. lower-latin (a, b, c)
  9. upper-latin (A, B, C)
  10. lower-greek (α, β, γ)
  11. upper-greek (Α, Β, Γ)
  12. armenian
  13. georgian
  14. cjk-ideographic
  15. hiragana
  16. hiragana-iroha
  17. katakana
  18. katakana-iroha
  19. georgian

For example OL {list-style-type: lower-alpha}

The initial value for list-style-type is disc.

List-style-position

This can be inside or outside (initial value). For example, OL {list-style-position: inside}.

Outside:
  1   List item
      second line of list item

Inside:

  1   List item
  second line of list item

List-style-image

This specifies that an image should be used instead of a list style type. It follows this syntax: list-style-image: url(li.gif). Alternatively none can be specified, which is the initial value. For example, P {list-style-image: url(li.gif)}

List-style

This is a shorthand for one or more of the above. For example, LI {list-style: outside lower-alpha}

The next section considers the box model - margins, padding and borders.