HOME
            About US
            Contact Us
            Fun Games

CSS List
CSS ListCSS 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.
Delhi

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


© funandhobby.com (CSS List)