CSS | LISTS - GeeksforGeeks

Two types of list exist in CSS i.e. Unordered lists and Ordered Lists

UNORDERED LISTS
In unordered lists, the list items are marked with bullets.
ORDERED LISTS
In ordered lists, the list items are marked with numbers and alphabet.

List Item Marker: This property specifies the type of item marker i.e. unordered list or ordered

Syntax:

list-style-type:value;

Now, the value can be following:

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

Example:

<!DOCTYPE> 
<html> 
   <head> 
      <style> 
         ul.a 
         { 
         list-style-type:square; 
         } 
         ol.c 
         { 
         list-style-type:lower-alpha; 
         } 
      </style> 
   </head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <p> 
         Unordered lists 
      </p> 
      <ul class="a"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
      <ul class="b"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
      <p> 
         Ordered Lists 
      </p> 
      <ol class="c"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
      <ol class="d"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
   </body> 
</html> 

OUTPUT:

Image as List Marker: This property specifies for the image as list item marker.
Example:

<!DOCTYPE> 
<html> 
   <head> 
      <style> 
         ul.a 
         { 
         list-style-image:url(d.jpg); 
         } 
      </style> 
   </head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <p> 
         Unordered lists 
      </p> 
      <ul class="a"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
   </body> 
</html> 

OUTPUT:

List Marker Position: This property specifies the position of the list item marker. There are 2 types of position marker:
1. list-style-position: outside
In this, the bullet points will be outside the list item. The start of each line of the list will be aligned vertically.

Example:

<!DOCTYPE> 
<html> 
   <head> 
      <style> 
         ul.a 
         { 
         list-style-position:outside; 
         } 
      </style> 
   </head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <p> 
         Unordered lists 
      </p> 
      <ul class="a"> 
         <li>one <br>In this the bullet points will be outside the list item.</li> 
         <li>two<br> 
            The start of each line of the list will be aligned vertically. 
         </li> 
         <li>three</li> 
      </ul> 
   </body> 
</html> 
COPY TO  

OUTPUT:

2. list-style-position:inside
In this the bullet points will be inside the list. The line along with the bullet points will be aligned vertically.
Example:

<!DOCTYPE> 
<html> 
   <head> 
      <style> 
         ul.a 
         { 
         list-style-position:inside; 
         } 
      </style> 
   </head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <p> 
         Unordered lists 
      </p> 
      <ul class="a"> 
         <li>one <br>In this the bullet points will be inside the list item.</li> 
         <li>two<br> 
            The line along with the bullet points will be aligned vertically.. 
         </li> 
         <li>three</li> 
      </ul> 
   </body> 
</html> 

OUTPUT:

Shorthand Property:
This property allows us to set all the list properties in one command. The order of property is a type, position, and image.
If any of the property is missing, the default value is inserted.
Example:

<!DOCTYPE> 
<html> 
   <head> 
      <style> 
         ul.a 
         { 
         list-style:square inside; 
         } 
      </style> 
   </head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <p> 
         Unordered lists 
      </p> 
      <ul class="a"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
   </body> 
</html> 

OUTPUT:

Styling Lists:
The list can be formatted in CSS. Different colors, borders, background, and paddings can be set for the lists.
Example:

<!DOCTYPE> 
<html> 
   <head> 
      <style> 
         ul.a 
         { 
         list-style:square; 
         background:hotpink; 
         padding:20px; 
         } 
      </style> 
   </head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <p> 
         Unordered lists 
      </p> 
      <ul class="a"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
   </body> 
</html> 

OUTPUT:

NESTED LISTS:

Lists can also be nested. We have sub-sections for sections, so we need nesting of lists.
Example:

<!DOCTYPE> 
<html> 
   <head></head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <ul> 
         <li> 
            one 
            <ul> 
               <li>sub one</li> 
               <li>sub two</li> 
            </ul> 
         </li> 
         <li> 
            two 
            <ul> 
               <li>sub one</li> 
               <li>sub two</li> 
            </ul> 
         </li> 
         <li> 
            three 
            <ul> 
               <li>sub one</li> 
               <li>sub two</li> 
            </ul> 
         </li> 
      </ul> 
   </body> 
</html> 

OUTPUT:

My Personal Notes

Recommended Posts: