List in CSS

css List in CSS List In Css

Lists

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>

css List In Css Chapter Next »