Skip to content
Related Articles

Related Articles

CSS Lists

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 29 Oct, 2021

The List in CSS specifies the listing of the contents or items in a particular manner i.e., it can either be organized orderly or unorder way, which helps to make a clean webpage. It can be used to arrange the huge with a variety of content as they are flexible and easy to manage. The default style for the list is borderless. The list can be categorized into 2 types:

  • Unordered List: In unordered lists, the list items are marked with bullets i.e small black circles by default.
  • Ordered List: In ordered lists, the list items are marked with numbers and an alphabet.

List Item Marker: This property specifies the type of item marker i.e. unordered list or ordered. The list-style-type property specifies the appearance of the list item marker (such as a disc, character, or custom counter style) of a list item element. Its default value is a disc.

Syntax: 

list-style-type:value;

The following value can be used:

  • 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: This example describes the CSS List with the various list-style-type where the values are set to square & lower-alpha.

HTML




<!DOCTYPE html>
<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 the image as a list item marker. The list-style-image property is used to sets an image to be used as the list item marker. Its default value is “none”.

Syntax:

list-style-image: url;

Example: This example describes the CSS List with the various list-style-image where the values are set to url of the image.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> CSS list-style-image Property </title>
    <style>
    ul {
        list-style-image: url(
    }
    </style>
</head>
  
<body>
    <h1>
            GeeksforGeeks
        </h1>
      
<p> Unordered lists </p>
  
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
  
</html>


Output:

List Marker Position: This property specifies the position of the list item marker. The list-style-position property is used to sets the position of the marker relative to a list item. Its default value is “outside”.

There are 2 types of position markers: 

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

Syntax:

list-style-position: outside;

Example: This example describes the CSS List with the various list-style-position where the value is set to outside. 

HTML




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


Output:

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.

Syntax:

list-style-position: inside;

Example: This example describes the CSS List with the various list-style-position where the value is set to inside. 

HTML




<!DOCTYPE html>
<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 properties is missing, the default value is inserted. 

Example: This example describes the CSS List using the shorthand property.

HTML




<!DOCTYPE html>
<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, backgrounds, and paddings can be set for the lists. 

Example: This example describes the CSS List where the various styling properties are applied to the element.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
    ul.a {
        list-style: square;
        background: pink;
        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 List: Lists can also be nested. We have sub-sections for sections, so we need the nesting of lists. 

Example: This example describes the CSS List having a list declared inside another list.

HTML




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

Supported Browsers:

  • Google Chrome 95.0
  • Microsoft Edge 95.0
  • Firefox 93.0
  • Internet Explorer 11.0
  • Opera 80.0
  • Safari 15.0


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!