Styling Lists

There are a number of properties that are specific to styling lists.

list-style-typethe type of marker.
list-style-imagean image as a marker.
list-style-positionposition of the marker in relation to the list item box(inside | outside).
list-styleShorthand property to set all list characteristics.

The format for the list-style shorthand property is as follows:

list-style: <list-style-type> <list-style-position> <list-style-image>

Setting the List Marker Type

The list-style-type property sets the style of marker(bullet). You can apply this property to entire lists or individual list items. You can see the allowed values for this property are

noneNo marker will be shown.
boxbox shape as the marker.
checkcheck mark shape as the marker.
circlecircle shape as the marker.
diamonddismond shape as the marker.
discdisc shape as the marker.
dashdash shape as the marker.
squaresquare shape as the marker.
decimalUse decimal numbers for the markers.
binaryUse binary numbers for the markers.
lower-alphaUse lowercase alpha characters for the markers.
upper-alphaUse uppercase alpha characters for the markers.
            ol { 
                list-style-type: lower-alpha; 
        This is a test: 
            <li style="list-style-type: decimal">C</li> 
Click to view the demo
  HTML CSS Book 

Lst Style:
  1. Styling Lists
  2. Using an Image As a List Marker
  3. Positioning the Marker