CSS Properties for Lists

Some CSS properties are specifically for use with HTML list elements (<ol>, <ul>, <li>). Since I can never remember what they are, and I don't always have my well-worn copy of the HTML Stylesheet Sourcebook handy, I have put this information on a web page where I can get at it easily.

propertyvalues
list-style-typecircle, disc, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman, none
list-style-imageurl(url-string), none
list-style-positioninside, outside
list-stylevalues from above 3 properties

Table from HTML Stylesheet Sourcebook p. 185, © 1997 by Ian S. Graham

Examples

An ordered list <ol>:

  1. list-style-type: circle
  2. list-style-type: disc
  3. list-style-type: square
  4. list-style-type: decimal
  5. list-style-type: upper-alpha
  6. list-style-type: lower-alpha
  7. list-style-type: upper-roman
  8. list-style-type: lower-roman
  9. list-style-type: none
  10. list-style-image: url('circle.gif')
  11. list-style-position: inside
  12. list-style-position: outside

An unordered list <ul>:

Another unordered list <ul>:

An outline made from nested ordered lists <ol>:

  1. Breakfast
    1. Drink
      1. Coffee
      2. Orange juice
    2. Food
      1. Meat
        1. Sausage
        2. Bacon
      2. Bread
        1. Cereal
          1. Oatmeal
          2. Cheerios
        2. Biscuit
        3. Toast
  2. Lunch
    1. Drink
    2. Food
  3. Dinner
    1. Drink
    2. Food


[Back to Tech Index]