CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS list properties

With CSS list properties, you can specify how lists appear.

This tutorial focuses on:

Setting the marker for a list

The marker for a list is set with the list-style-type attribute.

Possible values for the list-style-type attribute: disc, square, decimal, lower-roman, upper-alpha

Example:
<html> <head> <title>Lists</title> </head> <body> <ul style="list-style-type: square;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ul> <ul style="list-style-type: upper-alpha;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ul> <ol style="list-style-type: disc;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ol> <ol style="list-style-type: circle;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ol> </body> </html>
Output:
  • green
  • blue
  • gray
  • orange
  • green
  • blue
  • gray
  • orange
  1. green
  2. blue
  3. gray
  4. orange
  1. green
  2. blue
  3. gray
  4. orange

Specifying where a list is placed

The location of a list is specified with the list-style-position attribute. The location of a list can be specified as its default location using the value "inside" or as another location using the value "outside" so that it can be displayed as an indented list.

Example:
<html> <head> <title>Lists</title> </head> <body> <ul style="list-style-position: outside;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ul> <ol style="list-style-position: inside;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ol> </body> </html>
Output:
  • green
  • blue
  • gray
  • orange
  1. green
  2. blue
  3. gray
  4. orange
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information