List in CSS


CSS can be used to control the lists and their styles.

Shorthand property for list

Example <html> <head> <style> ul { list-style: circle outside url("sqgreen.png"); } </style> </head> <body> <p>This is a shorthand property for list.</p> <ul> <li>web designing</li> <li>networking</li> <li>artificial intelligence</li> </ul> </body> </html>

Different properties related to lists are as follows:

List Style

It consists of different properties such as list-style-type,list-style-position and list-style-image. List-style-type specifies the type of bullet displayed with each item many possible values such as disc,square and circle etc.

EXAMPLE <html> <style type="text/css"> ol.c { list-style-type: upper-alpha; } ol.d { list-style-type: lower-roman; } ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ul.f { list-style-type: none; } </style> <body> <ol class=c> <li>information Technology </li> <li>Web programming</li> <li>Visual Programming</li> </ol> <ol class=d> <li>information Technology </li> <li>Web programming</li> <li>Visual Programming</li> </ol> <ul class=a> <li>MCS</li> <li>BSCS</li> <li>BSSE</li> </ul> <ul class=b> <li>MCS</li> <li>BSCS</li> <li>BSSE</li> </ul> <ul class=f> <li>MCS</li> <li>BSCS</li> <li>BSSE</li> </ul> </body> </html>

List Position

List-style-Position specifies the position of bullet.possible values are inside and outside

Example <html> <head> <style type="text/css"> ul{list-style-position: inside;} ol{list-style-position: outside;} </style> </head> <body> Order list of subjects are as follow: <ol> <li>information Technology </li> <li>Web programming</li> <li>Visual Programming</li> </ol> Unorder list of classes are as follow: <ul><li>MCS</li> <li>BSCS</li> <li>BSSE</li> </ul> </body> </html>

List Image

LIst style as image

CSS can be used to display an image with each item in the list as follows:

Example <html> <head> <style type="text/css"> ul{list-style-image: url(redbullet.gif);} </style> </head> <body> <ul><li>MCS</li> <li>BSCS</li> <li>BSSE</li> </ul> </body> </html>
Chapter Next »