Three type of list:

  • Unordered list
  • Order list
  • Definition list

Unordered List:

Unordered list, items are marked with round bullets, But, you can change this default list marker type to any other type such as circle, square, roman numerals, Latin letters, and so on using the list-style-type property.
Ex :

ul   {list-style-type: square;   }

Order List:

Ordered list are numbered with Arabic numerals (1, 2, 3, etc.),
Ex:

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

Changing the position of list:

List markers are positioned outside of the list item’s boxes, by default. The list-style-position property to specify whether the markers or bullet points appear inside or outside of the list item’s principal block boxes.
This property takes the value inside or outside, with outside being the default. If the value inside is used, the lines will wrap under the marker instead of being indented.

Inside position:

Ex:

ul.in li {   list-style-position: inside; }

Outside position:

Ex:

ul.out li {   list-style-position: inside; }

Images as List Markers:

You can also set an image as a list marker using the list-style-image property. The style rule in the following example assigns a transparent PNG image “picture.png” as the list marker for all the items in the unordered list.

Ex:

ul li {   list-style-image: url("arrow.png");    }

Solution for Image Marker:

When using an image as bullet using the list-style-image property, the bullets does not line up to the text accurately across the browsers. As a work-around, you can properly align bullet images via the background-image CSS property. First, set the list to have no bullets. Then, define a non-repeating background image for the list element.
Ex:

ul {    list-style-type: none;}
ul li {
    background-image: url("picture.png");
   background-position: 0px 5px;   /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;   }