HOME
          About US
          Contact Us

CSS List

Chapter - 19 : CSS Lists


Various lists are already explained in with respect to HTML tag in previous chapters (Chapter 9.0). Here we will see, how to define in 'Style Sheet'.

19.1- Unordered: In this list items are marked with different types of bullets. (dot, square etc.). This is defined with 'ul'. You may use any one of the following.

ul.a {list-style-type: dot;}
ul.a {list-style-type: square;}
ul.a {list-style-type: circle;}

If you have used the 'dot' style, the list will be
 . Delhi
. Lucknow

In case of unordered list, in place of dot / square an image can also be used.
Ul {list-style-image: url('mark.gif');}

Here the list will show the image named mark.gif in place of bullets.
List Delhi

List Lucknow

It is possible that in some browser the image bullet not displayed properly. To be on safe side, this can be defined as background image. This will definitely show equal performance in all browsers.

Ul {list-style-type: none; padding: 0px; margin: 0px;}
li {background-image: url(mark.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 10px;}

19.2- Ordered: In this list items are marked with numbers or letters (1,2,3 or a,b,c etc.). This is defined with 'ol'. You may use any one of the following.

ol.a {list-style-type: lower-roman;}
ol.a {list-style-type: upper-roman;}
ol.b {list-style-type: lower-alpha;}
ol.b {list-style-type: upper-alpha;}
ol.b {list-style-type: number;}

If you have used the 'upperroman', the list will be
 I Delhi
II Lucknow


CSS List © funandhobby.com (CSS List)