Home Advertise with us Forum Articles Sitemap Contact
Logo  

CSS Lists

As explained earlier in HTML tutorial, there are two types of lists in HTML –

Unordered Lists – The items in the list are marked with bullets.

Ordered Lists – The items in the list are marked with letters or numbers.

CSS provides a scope to customize these lists to an extent that, you can set different list item markers for your unordered & ordered lists or can even set images as list item markers.
List Style Type - This property is used to specify the type of list item marker.

Example: ul.a {list-style-type: square;} /* unordered list */

ol.a {list-style-type: lower-latin;} /* ordered list */



List Style Image - This property is used to specify an image as a list item marker.

Example: ul {list-style-image: url ('flower.gif');}


List Style Position - This property is used to alter the indentation of the list items.

ul { list-style-position: inside; }

ol { list-style-position: outside; }


List Shorthand - CSS allows specifying all the list properties in one single property called as shorthand property.

Example: ul {list-style: upper-roman inside

url(http://www.example.com/notHere.gif);}