Lists come in two basic flavors: unordered and ordered. However, CSS allows for more list customization than HTML -- to the extent that even images can be used as bullet points for unordered lists!.
If you want to use something different from the default numbering of ordered lists, or the bullets/discs of unordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes.
Unordered list styles: square, circle, disc (default), and none
Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none
ol { list-style-type: upper-roman; } ul { list-style-type: circle; }
As we stated in the introduction, CSS lists allow you to insert an image in place of the normal bullets. A good choice for a bullet image would be one that is smaller than the height of your text and is a relatively simple/plain graphic.
ul { list-style-image: url("listArrow.gif"); } ol { list-style-image: url("listArrow2.gif"); }
With CSS, it is possible to alter the indentation that takes place with your list items. See the example below for the trick of indenting your lists.
ul { list-style-position: inside; } ol { list-style-position: outside; }
It is possible to combine the above CSS techniques into one line of CSS. This is useful if you would like to have a list-style-type take the place of your list image, if the image is not able to be loaded.
ul { list-style: upper-roman inside url("http://www.example.com/notHere.gif");}