CSS Lists - GeeksforGeeks

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("https://contribute.geeksforgeeks.org/wp-content/uploads/listitem-1.png");    }    </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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
bhaskargeeksforgeeks
CSS-Basics
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?