Tutorialspoint.dev

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:

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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter