CSS Styling Lists

CSS List Style Type

There are two types of lists:

1. Unordered lists
2. Ordered lists.

Unordered list styles: disc (default), square, circle or none.

Ordered list styles: decimal (default), upper-alpha, lower-alpha, upper-roman, lower-roman or none.

Example:

ol { list-style-type: upper-alpha; }
ul { list-style-type: square; } 

CSS List Style Position

There is a possibility to set the list markers position to outside (default) or inside the content flow.

Example:

ul.i { list-style-position: inside; } 
ul.o { list-style-position: outside; } 

CSS List Style Image

The list-style-image property is used to set an image as the list item marker.

Example:

ol { list-style-image: url('example.gif'); }
ul { list-style-image: url('example_2.gif'); } 

Another example:

ul { list-style: square url('not_exist.gif'); }