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
Example:
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }

Here is an ordered list:
• This list is
• using roman
• numerals
• with CSS!
and now an unordered list:
1. This list is
2. using circle types
3. with CSS!
CSS Lists With Images
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 one that is smaller than the height of your text and is a relatively simple/plain graphic.
Example:
ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }

Here is an unordered list:
• This list is
• using a picture with CSS!
and now an ordered list:
1. This list is
2. using a picture
3. with CSS!
As you can see, it does not matter if the lists are

or
when using images. Nevertheless, it is a good coding practice to only use images for an unordered list. Ordered lists usually have an incremented (growing) value that appears next to each list item and you can't do this with just one image.
CSS List Position
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.
Example:
ul { list-style-position: inside; }
ol { list-style-position: outside; }

 

• This list is
• using inside
• positioning with CSS!
and now an ordered list:
1. This list is
2. using outside
3. positioning with CSS!
Note: "Outside" is actually the default setting for indentation.
List: All in One
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.

Example:
ul { list-style: upper-roman inside url("http://www.example.com/notHere.gif");}

• This list's image did
• NOT load correctly
• But because we chose to include
• A CSS list type, we avoided a bland list!