CSS Styling 5: Lists

The CSS list properties allow you to set different list item markers for ordered lists, set different list item markers for unordered lists and set images as the list item marker. In HTML there are two types of lists called unordered and ordered lists. Unordered lists are marked with bullet points and ordered lists are marked with letters and numbers. CSS can style lists even further.
You can basically give any value in the syntax as long as it complies with the fact that the list is ordered or unordered. This is a code for the unordered list and ordered list:
 ul.a {list-style-type: circle;} (unordered)
ol.c {list-style-type: upper-roman;} (ordered)
Each syntax must start two letters representing weather it's and unordered list or ordered list. Upper roman will give you roman numerals but if you put lower-alpha in its place it will replace the numerals with lower case letters.

An image as the list marker:
An image marker works as a unordered list marker. It uses the list-style-image property.
ul{list-style-image: url('sqpurple.gif');}
This is the usual code but in internet explorer and Opera the image will display higher up. To remove this problem a crossbrowser solution must be used. These syntax's are the solution:
ul{list-style-type: none;padding: 0px;margin: 0px;}
ul li{background-image: url(sqpurple.gif);background-repeat: no-repeat;background-position: 0px 5px; padding-left: 14px; }
The ul syntax sets the list-style-type to none to remove the list item marker and sets both padding and margin to 0px
The li and ul sets the URL of the image, and to show it only once. It also positions the image where you want it (left 0px and down 5px) and posittions the text in the list with padding-left.