CSS Lists

Last Updated : 03 Apr, 2024

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.

Try It:

Decimal

Decimal Leading Zero

Lower Roman

Upper Roman

Lower Alpha

Upper Alpha

Square

None

Circle

Item 1
Item 2
Item 3

Currently Active Property:

list-style-type: decimal;

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.

We have the following CSS lists properties, which can be used to control the CSS lists:

list-style-type: This property is used to specify the appearance (such as disc, character, or custom counter style) of the list item marker.
list-style-image: This property is used to set the images that will be used as the list item marker.
list-style-position: It specifies the position of the marker box with respect to the principal block box.
list-style: This property is used to set the list style.

Now, we will learn more about these properties with examples.

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:

CSS List Style Type	Description
`none`	No marker or bullet is displayed.
`circle`	Default marker for unordered lists, displays a hollow circle.
`decimal`	Default marker for ordered lists, displays decimal numbers (1, 2, 3, etc.).
`decimal-leading-zero`	Displays decimal numbers with leading zeroes (01, 02, 03, etc.).
`lower-roman`	Displays lowercase Roman numerals (i, ii, iii, etc.) for ordered lists.
`upper-roman`	Displays uppercase Roman numerals (I, II, III, etc.) for ordered lists.
`lower-alpha`	Displays lowercase alphabetical characters (a, b, c, etc.) for ordered lists.
`upper-alpha`	Displays uppercase alphabetical characters (A, B, C, etc.) for ordered lists.
`square`	Displays filled square markers for unordered lists.

CSS Lists Examples

Example 1: 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:

Example 2: 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:

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

Example 3: 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:

Supported Browsers:

Google Chrome
Microsoft Edge
Firefox
Opera
Safari

Suggest improvement

CSS Links

CSS Tables

Share your thoughts in the comments

CSS Text Formatting

CSS Backgrounds

CSS Lists

CSS Box model

CSS Positioning Elements

CSS flexbox

CSS Grid Layout

Responsive Web Design

CSS Transitions

CSS Animations

CSS Lists

Try It:

CSS Lists Examples

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?