CSS Lists

Lists in CSS

There are various CSS properties that can be used to control lists. CSS Lists can be classified as ordered lists and unordered lists. In ordered lists, marking of the list items is with alphabet and numbers, whereas in unordered lists, the list items are marked using bullets.

We can style the lists using CSS.

The CSS properties to style the lists are given as follows:

i. list-style-type: This property is responsible for controlling the appearance and shape of the marker.

ii. list-style-image: It sets an image for the marker instead of the number or a bullet point.

iii. list-style-position: It specifies the position of the marker.

iv. list-style: It is the shorthand property of the above properties.

v. marker-offset: It is used to specify the distance between the text and the marker.

The list-style-type property:

The CSS list properties allow us to set different list item markers.

Example:

<!DOCTYPE html>  
<html> 
   <head> 
   <title>CSS Lists</title>
      <style> 
	  .num{
	    list-style-type:decimal; 	  
		 list-style-position:inside; 
	  }
	  .roman{
	   list-style-type:lower-roman; 
	   list-style-position:outside; 
	  }
	  .circle{
	    list-style-type:circle; 
		list-style-position:inside;
	  }
	  .square{
	    list-style-type:square; 
	  }
	  .disc{
	    list-style-type:disc; 
		list-style-position:inside;
	  }
      </style> 
   </head> 
   <body> 
      <h1> 
         Welcome to the AskAtul.com 
      </h1> 
	        <h2> 
         Ordered Lists 
      </h2> 
      <ol class="num"> 
         <li>INSIDE</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
	  <ol class="roman"> 
         <li>OUTSIDE</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
      <h2> 
         Unordered lists 
      </h2> 
      <ul class="disc"> 
         <li>INSIDE</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
      <ul class="circle"> 
         <li>INSIDE</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
	  <ul class="square"> 
         <li>DEFAULT</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 

   </body> 
</html>


The list-style-position property:

It specifies the position of the marker box (inside, outside).

inside: It means that the bullet points will be in the list item. In this, if the text goes on the second line, then the text will be wrap under the marker.

outside:It represents that the bullet points will be outside the list item. It is the default value.

Example:

<!DOCTYPE html>  
<html> 
   <head> 
   <title>CSS Lists</title>
      <style> 
	  .num{
	    list-style-type:decimal; 	  
		 list-style-position:inside; 
	  }
	  .roman{
	   list-style-type:lower-roman; 
	   list-style-position:outside; 
	  }
	  .circle{
	    list-style-type:circle; 
		list-style-position:inside;
	  }
	  .square{
	    list-style-type:square; 
	  }
	  .disc{
	    list-style-type:disc; 
		list-style-position:inside;
	  }
      </style> 
   </head> 
   <body> 
      <h1> 
         Welcome to the AskAtul.com 
      </h1> 
	        <h2> 
         Ordered Lists 
      </h2> 
      <ol class="num"> 
         <li>INSIDE</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
	  <ol class="roman"> 
         <li>OUTSIDE</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
      <h2> 
         Unordered lists 
      </h2> 
      <ul class="disc"> 
         <li>INSIDE</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
      <ul class="circle"> 
         <li>INSIDE</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
	  <ul class="square"> 
         <li>DEFAULT</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 

   </body> 
</html>


The list-style-image property:

It specifies an image to be used as the list item marker.

Example:

<!DOCTYPE html>  
<html> 
   <head> 
   <title>CSS Lists</title>
      <style> 
	  .order{
	    list-style-image: url(img.png); 	   
	  }	
	  .unorder{
	    list-style-image: url(img.png); 	   
	  }

      </style> 
   </head> 
   <body> 
      <h1> 
         Welcome to the AskAtul.com 
      </h1> 
	        <h2> 
         Ordered Lists 
      </h2> 
      <ol class="order"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
      <h2> 
         Unordered lists 
      </h2> 
      <ul class="unorder"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 

   </body> 
</html>

The list-style property:

The list-style property is a shorthand property for setting list-style-type, list-style-image and list-style-position. It is used to set all of the list properties in one declaration:

Example:

<!DOCTYPE html>  
<html> 
   <head> 
   <title>CSS Lists</title>
      <style> 
	  .order{
	    list-style: lower-alpha inside url(img.png); 	   
	  }
	  .unorder{
	    list-style: disc outside; 	   
	  }

      </style> 
   </head> 
   <body> 
      <h1> 
         Welcome to the AskAtul.com 
      </h1> 
	        <h2> 
         Ordered Lists 
      </h2> 
      <ol class="order"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
      <h2> 
         Unordered lists 
      </h2> 
      <ul class="unorder"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 

   </body> 
</html>

Styling Lists with colors:

To make the lists more attractive and interesting, we can style lists with colors. The addition of anything to the <ul> or <ol> tag will affect the entire list, whereas the addition to the individual <li> tag will affect the items of the corresponding list.

Example:

<!DOCTYPE html>  
<html> 
   <head> 
   <title>CSS Lists</title>
      <style> 
	  .order{
	    list-style: upper-alpha;
		background: pink;
		padding:20px;
	  }
	  .order li{
	  background: lightblue;
	  padding:10px;
	  font-size:20px;
	  margin:10px;
	  }
	  .unorder{
	    list-style: square inside; 	
		background: cyan;
		padding:20px;
	  }
	  .unorder li{
	  background: green;
	  color:white;
	  padding:10px;
	  font-size:20px;
	  margin:10px;
	  }

      </style> 
   </head> 
   <body> 
      <h1> 
         Welcome to the AskAtul.com 
      </h1> 
	        <h2> 
         Ordered Lists 
      </h2> 
      <ol class="order"> 
         <li>ONE</li> 
         <li>TWO</li> 
         <li>THREE</li> 
      </ol> 
      <h2> 
         Unordered lists 
      </h2> 
      <ul class="unorder"> 
         <li>ONE</li> 
         <li>TWO</li> 
         <li>THREE</li> 
      </ul> 

   </body> 
</html>

Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *