Going The Extra Mile

Bulleted Lists

If you are wanting to use something different then 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

CSS Code:

ol { list-style-type: upper-roman; }  
ul { list-style-type: circle; }

Display:

Here is an unordered list:

This list is
using circle types
with CSS!

and now an ordered list:

This list is
using
numerals
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.

CSS Code:

ul { list-style-image: url("listArrow.gif"); }   
ol { list-style-image: url("listArrow2.gif"); }

As you can see, it does not matter if the lists are <ul> or <ol> 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.

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. You may only use keyterms when specifying the indentation.

CSS Code:

ul { list-style-position: inside; }   
ol { list-style-position: outside; }

Display:

This list is
using inside
positioning with CSS!

and now an ordered list:

This list is
using outside
positioning with CSS!

Note: "outside" is actually the default setting for indentation.

ul
{
list-style-type: disc
}

Possible Values

Value	Description
<ul>	Unordered List
list-style-type:
none	No marker
disc	Default. The marker is a filled circle
circle	The marker is a circle
square	The marker is a square
decimal	The marker is a number
decimal-leading-zero	The marker is a number padded by initial zeros (01, 02, 03, etc.)

DIY : http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type

Numbered Lists