CSS | LISTS

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

  1. UNORDERED LISTS
    In unordered lists, the list items are marked with bullets.
  2. 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


OUTPUT:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


OUTPUT:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


OUTPUT:


NESTED LISTS:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


OUTPUT:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.