CSS List

There are various CSS properties that can be used to control lists. Lists can be classified as ordered and unordered lists.

In ordered lists, marking of the list items is with alphabet or numbers, whereas in unordered lists, the list items are marked using bullets or circles.

We can style the lists using CSS. These properties allow us to:

  • Set the distance between the text and the marker in the list.
  • Specify an image for the marker instead of using the number or bullet point.
  • Control the marker appearance and shape.
  • Place the marker outside or inside the box that contains the list items.
  • Set the background colors to list items and lists.

Note:- The list also includes the default some padding and margin. To remove this, we need to add padding:0 and margin:0 to <ol> and <ul>.


The list-style-type property

This property is responsible for controlling the appearance and shape of the marker.

It allows us to change the default list type of marker to any other type such as roman numerals, square, circle, Latin letters, and many other.

By default, the ordered list items are numbered with Arabic numerals (1, 2, 3, etc.), and the items in an unordered list are marked with round bullets (•). If we set its value to none, it will remove the default markers/bullets.

Input:-

Index.html
	
<body>
      <ol class="roman">   
         <li>one</li>   
         <li>two</li>   
         <li>three</li>   
      </ol>     
      <ul class="square">   
         <li>one</li>   
         <li>two</li>   
         <li>three</li>   
      </ul> 
</body>

Style.css
.roman{  
   list-style-type: lower-roman;   
}  
.disc{  
   list-style-type: disc;   
}

Output:-


The list-style-position property

It represents whether the appearing of the marker is inside or outside of the box containing the bullet points. It includes two values:-

  • inside: It represents 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 is the default value and represents that the bullet points will be outside the list item. It can also make our ordinary text links look like button using CSS. To do this we need to utilize few more CSS properties such as color, background-color, border, padding, margin etc.
Input:-

Index.html
	
<body>
      <ol class="roman">   
         <li>Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</li>
         <li>two</li>   
         <li>three</li>   
      </ol>     
      <ul class="square">   
         <li>one</li>   
         <li>Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</li>
         <li>three</li>   
      </ul> 
</body>

Style.css
.roman{  
   list-style-type: lower-roman; 
	  list-style-position: inside;  
}  
.disc{  
   list-style-type: disc;
   list-style-position: outside;   
}

Output:-


The list-style-image property

Using this property, we can set the image bullets. Its syntax is similar to the background-image property. If it does not find the corresponding image, the default bullets will be used.

Input:-

Index.html
	
<body>
      <ol class="roman">   
         <li>Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</li>
         <li>two</li>   
         <li>three</li>   
      </ol>     
      <ul class="square">   
         <li>one</li>   
         <li>Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</li>
         <li>three</li>   
      </ul> 
</body>

Style.css
.roman{  
   list-style-type: lower-roman; 
	  list-style-image: url(img.png)
}  
.disc{  
   list-style-type: disc; 
}

Output:-


The list-style property

It is the shorthand property that is used to set all list properties in one expression. The order of the values of this property is type, position, and image. But if any property value is missing in it, then the default value will be inserted.

Input:-

Index.html
	
<body>
      <ol class="roman">   
         <li>Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</li>
         <li>two</li>   
         <li>three</li>   
      </ol> 
</body>

Style.css
.roman{  
   list-style: lower-alpha inside url(img.png); 
}  

Output:-


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 only.

Input:-

Index.html
	
<body>
      <ol class="roman">   
         <li>Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</li>
         <li>two</li>   
         <li>three</li>   
      </ol> 
</body>

Style.css
.roman{  
   list-style: upper-alpha;
    background: pink;
    padding: 20px;
}  

Output:-