CSS can be used to control the lists and their styles.
<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>
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-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>
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>