RichInStyle.com CSS2 tutorial - Lists

Contents

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:

• disc (colored-in circle - the initial value)
• circle (hollow circle)
• square

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.

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.