css lists - ordered unordered

the css list properties control list type, list position, list style etc.

Css list

in html,there are two types of lists

  • ordered list -list items are marked with bullets.
  • unordered list -list items are marked with numbers or letters.

there are five css properties which can be used to controls lists

  • list-style-type - set different list item markers for ordered and unordered list.
  • list-style-image - set an image as the list item marker.
  • list-style-position - it's value determines how the list-item marker is drawn with regard to the content.
  • list-style - the 'list-style property' is a shorthand notation for preceding properties.
  • marker-offset - specifies the distance between a marker and the text in the list.

Css list-style-type

this property is used to determine the appearance of the list-item marker if 'list-style-image is 'none'.

         
         ol.decimal{list-style-type:decimal; }
         
         ol.loweralpha{list-style-type:lower-alpha; }
         
         ol.lowerroman{list-style-type:lower-roman; }
                  
         ul.c{list-style-type:circle; }
         
         ul.s{list-style-type:square; }

Css list-style-image

this property sets the image that will be used as the list-item marker.

       ol{list-style-image:url(/png.com/ol.png); }
       
       ul{list-style-image:url(/png.com/ul.png); }

Css list-shorthand property

the 'list-style' property is a shorthand notation for setting the three properties

'list-stle-type','list-style-image and 'list-style-position'.

       ul{list-style:circle inside url("/ul.png"); }
       
       ol{list-style:decimal outside url("/ol.png"); }

all css list properties

  propertydescription
list-stylesets all properties for a list in one declaration.
list-style-typespecifies the type of list-item marker.
list-style-positionspecifies the list-item marker position.
list-style-imagespecifies image as the list-item marker.