CSS3 Tutorial 8: Styling Lists

In HTML there are 2 kinds of lists, Unordered lists and ordered lists; these can be styled with CSS.
There are multiple list item markers to choose from, the most common are circle and square.
You can also use custom images as list markers, I'll show you that later in this tutorial.

Defining List Item Markers

You use list-style-type to define the type of list item marker:
ul.a {list-style-type: square;}
ul.b {list-style-type: circle;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

These are some examples of values for ordered and unordered lists.

Using an Image as the List Item Marker

To use an image as the List Item Marker use list-style-image:
ul
{
list-style-image: url('image.here');
}

Unfortenuatly this does not show equally in all browsers, In IE and Opera it is displayed a little higher than in Firefox, Chrome and Safari.

This is a Crossbrowser solution:
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url('image.here');
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}