HTML list related properties are used to further style the ordered and unordered lists.

The main property is list-style-type with we which we are allowed to modify the symbol (bullet) in front of each listed item, with the differences between ordered and unordered lists.

List styling

The list-style-type property contains following information:

  1. value: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian lower-alpha, upper-alpha, none or inherit;
  2. initial: disc;
  3. applies to: list elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

Unordered lists may have selected glyphs disc, circle and square while the rest of options are rendered for unordered lists.

Considering that the special alphabets are undefined at the end, for longer ordered lists it is always better to use regular numbers.

The other possibility as a list type choice is to replace one of the pre-defined types with an image of choice. That can be done with the property list-style-image.

List styling image

The list-style-image property contains following information:

  1. value: <URI>, none or inherit;
  2. initial: none;
  3. applies to: list elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: absolute <URI> or 'none'.

If the image has defined intrinsic width and height then these values will be taken for its dimensions, otherwise the browser should always try to keep its width and height within 1 em.

The property list-style-type will be ignored and replaced with the property list-style-image if the latter is having a value other than none and unless the URI set for the image cannot be read.

Example

CSS list-style-type and list-style-type property example:

 

›› go to examples ››