List is HTML

We will see use of different types of list that we can use.

  • We can use different list in html CSS which can help us to define the list.

  • There are certain things that we require to define in points these points are of different types.

  • These list are used in the same way that you are seeing here.

  • Represented by <li>.

  • Types of list are:

    • Ordered list

    • Unordered list.


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


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

Syntax:

list-style-type:value;

We may use the value as follows:

  1. circle

  2. decimal, e.g.:1,2,3, etc

  3. decimal-leading-zeroes , eg :01,02,03,04,etc

  4. lower-roman

  5. upper-roman

  6. lower-alpha, e.g., a,b,c, etc

  7. upper-alpha, e.g., A, B, C, etc

  8. square


EXAMPLE

<!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>FOLLOW</li>   
         <li>ME</li>   
         <li>FOR MORE</li>   
      </ol>   
      <ol class="alpha">   
         <li>FOLLOW</li>   
         <li>ME</li>   
         <li>FOR MORE</li>   
      </ol>   

      <h2>   
         Unordered lists   
      </h2>   
      <ul class="circle">   
         <li>FOLLOW</li>   
         <li>ME</li>   
         <li>FOR MORE</li>   
      </ul>   
      <ul class="disc">   
         <li>FOLLOW</li>   
         <li>ME</li>   
         <li>FOR MORE</li>   

   </body>   
</html>


Did you find this article valuable?

Support Jalaj Singhal by becoming a sponsor. Any amount is appreciated!