RichInStyle.com CSS1 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 generally 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 e.g. OL.class LI {x: y} would override UL LI {x: z} in <OL class="class"> <UL> <LI> </UL> </OL> because it has greater specificity.

List-style-type

The values are:

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

1. decimal (1, 2, 3)
2. lower-roman (i, ii)
3. upper-roman (I, II)
4. lower-alpha (a, b, c),
5. upper-alpha (A, B, C)
6. none

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

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.