List Properties

The list elements <ol> and <ul> can be formatted in a variety of ways, overriding the default behaviour of the browser. The main properties are:

list-style-type
has values:
  • list-style-type: disc;
  • list-style-type: circle;
  • list-style-type: square;
  • list-style-type: decimal;
  • list-style-type: lower-roman;
  • list-style-type: upper-roman;
  • list-style-type: lower-alpha;
  • list-style-type: upper-alpha;
  • list-style-type: none;
list-style-image
specify a url using the syntax: url('imagefileurl'),
e.g. list-style-image: url(images/normal.png);
  • This list item has a smiley as its bullet.
list-style-position
has values: inside or outside . Default is outside. E.g.
  • list-style-position: outside; This list item has the
    list-style-position set to outside.
  • list-style-position: inside; This list item has the
    list-style-position set to inside.

Values can be combined using the list-style property as a shortcut. E.g:

list-style: circle inside none;

sets the list item(s) to have a circular bullet, with the bullet lined up with the text and no image.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera