CSS List Styles

The List in CSS determines how the contents or items are listed in a certain fashion, i.e., they can be arranged either neatly or randomly, which aids in creating a clean webpage. Because they are adaptable and simple to handle, they may be used to organize large amounts of material. The list's default style is borderless. The list may be divided into two categories:

Unordered List: By default, the list elements in unordered lists are denoted with bullets, which are tiny black circles.
Ordered List: The list elements in ordered lists are identified by numbers and letters.

The following CSS list properties are available for usage in controlling the CSS lists:

List-style-type:This property is used to determine the look of the list item marker, such as a disc, character, or custom counter style.
List-style-image: The pictures that will serve as list item markers may be specified using this parameter.
List-style-position: It describes where the marker box should be about the main block box.
List-style: The list style is configured with this attribute.

We shall now learn more about these characteristics through examples.

List-style-type property

The default list type of marker may be changed to a variety of other types, including square, circle, Roman numerals, Latin letters, and many more. The entries in an unordered list are denoted by round bullets (•), while the items in an ordered list are numbered by default using Arabic numerals (1, 2, 3, etc.).

The markings or bullets will be removed if we set their value to none.

Syntax:

list-style-type:value;

We may use the value as follows:

circle
decimal, e.g.:1,2,3, etc
decimal-leading-zeroes , eg :01,02,03,04,etc
lower-roman
upper-roman
lower-alpha, e.g., a,b,c, etc
upper-alpha, e.g., A, B, C, etc
square

Note: The default padding and margin are also included in the list. It is necessary to add padding:0 and margin:0 to the <ol> and <ul> tags to eliminate this.

Example

This example shows a CSS List with several list-style types and values set to square and upper-alpha and many.

<!DOCTYPE html>  
<html> 
   <head> 
   <title>Example for CSS Lists</title>
      <style> 
.num{
list-style-type:decimal;   
}
.alpha{
list-style-type:upper-alpha; 
}
  
.circle{
list-style-type:circle; 
}
.square{
list-style-type:square; 
}
.disc{
list-style-type:disc; 
}
      </style> 
   </head> 
   <body> 
      <h1> 
         Welcome to the course 
      </h1> 
      <h2> 
         Ordered Lists 
      </h2> 
      <ol class="num"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
      <ol class="alpha"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
        
      <h2> 
         Unordered lists 
      </h2> 
      <ul class="circle"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
      <ul class="disc"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
     
   </body> 
</html>

Output

List-style-position property

It indicates whether the marker appears within or outside of the box holding the bullet points. It has two values in it.

Inside: This indicates that the list item will contain the bullet points. If the text in this extends to the second line, it will wrap beneath the marker.
Outside: It indicates that the list item's bullet points will be outside of it. It is a default value.

<!DOCTYPE html>    
<html>   
   <head>   
   <title>CSS Lists</title>  
      <style>   
      .num{  
        list-style-type:decimal;        
         list-style-position:inside;   
      }  
      .roman{  
       list-style-type:upper-roman;   
       list-style-position:outside;   
      }  
      .circle{  
        list-style-type:circle;   
        list-style-position:inside;  
      }  
      .disc{  
        list-style-type:disc;  
        list-style-position:inside;  
      }  
      .square{  
        list-style-type:square;   
        list-style-position:inside;  
      }  
      </style>   
   </head>   
   <body>   
      <h1>   
         Welcome to the Course   
      </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="circle">   
         <li>INSIDE</li>   
         <li>two</li>   
         <li>three</li>   
      </ul>   
      <ul class="disc">   
         <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> 

Output

List Styling

The list may be styled using CSS. The lists can have custom backgrounds, padding, borders, and colors.

The different stylistic properties are applied to the element in the CSS List described in this example.

<!DOCTYPE html>
<html>

<head>
<style>
ul.main {
list-style: circle;
background: lightblue;
padding: 30px;
                        width: 70px
}
</style>
</head>

<body>
<h2>
Welcome
</h2>
<p> Unordered lists </p>
<ul class="main">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>

</html>

Output

Lists styled with colour

We may decorate lists with colors to make them more visually appealing and engaging. Anything added to the <ul> or <ol> tags will affect the whole list. However, anything added to a specific <li> tag will only affect that list's items.

<!DOCTYPE html>  
<html> 
   <head> 
   <title>Example for CSS Lists</title>
      <style> 
.order{
list-style: lower-alpha;
background: lightblue;
padding:20px;
                width: 90px;
}
.order li{
background: pink;
padding: 20px;
font-size:10px;
margin:10px;
}
.unorder{
list-style: circle inside; 
background: lightblue;
padding:20px;
                width: 90px;
}
.unorder li{
background: pink;
color:black;
padding:10px;
font-size:10px;
margin:10px;
}

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

   </body> 
</html>

Output