CSS Lists Styling

A list is a collection of items that are displayed in a sequential order. For example,

Default List

  • Georgia
  • New York
  • Chicago

Styled List

  • Georgia
  • New York
  • Chicago

The above example shows a default list and a CSS-styled list.


Types of List

Lists are broadly categorized into two types:

  • Unordered lists
  • Ordered Lists

Let's look at each of them briefly.


Unordered List

Unordered list creates a list of elements without any particular order.

Unordered lists are created using the <ul> element.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Browser Output

CSS Unordered List Example

Ordered List

Ordered list arranges elements in a specific order.

Ordered lists are created using the <ol> element.

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Browser Output

CSS Ordered List Example

Style Your List

We can use the following CSS properties to style our lists.

  • list-style-type
  • list-style-position
  • list-style-image
  • list-style (shorthand property)

We will look at each of them in detail.


CSS list-style-type Property

The list-style-type property specifies the type of item marker in a list.

The syntax of the list-style-type property is:

list-style-type: none | all | list-type

Here, the list-style-type property has the following common values,

  • disc: specifies a filled circle
  • circle: specifies a hollow circle
  • square: specifies a filled square
  • decimal: represents decimal numbers starting with 1
  • lower-alpha: specifies lowercase ASCII letters
  • lower-roman: specifies lowercase Roman numerals
  • upper-alpha: specifies uppercase ASCII letters
  • upper-roman: specifies uppercase Roman numerals

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS list-style-type</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <div>
            <p>list-style-type: disc</p>
            <ul class="disc">
                <li>Georgia</li>
                <li>New York</li>
            </ul>
        </div>

        <div>
            <p>list-style-type: circle</p>
            <ul class="circle">
                <li>Georgia</li>
                <li>New York</li>
            </ul>
        </div>

        <div>
            <p>list-style-type: square</p>
            <ul class="square">
                <li>Georgia</li>
                <li>New York</li>
            </ul>
        </div>

        <div>
            <p>list-style-type: decimal</p>
            <ul class="decimal">
                <li>Georgia</li>
                <li>New York</li>
            </ul>
        </div>

        <div>
            <p>list-style-type: lower-alpha</p>
            <ul class="lower-alpha">
                <li>Georgia</li>
                <li>New York</li>
            </ul>
        </div>

        <div>
            <p>list-style-type: upper-alpha</p>
            <ul class="upper-alpha">
                <li>Georgia</li>
                <li>New York</li>
            </ul>
        </div>

        <div>
            <p>list-style-type: upper-roman</p>
            <ul class="upper-roman">
                <li>Georgia</li>
                <li>New York</li>
            </ul>
        </div>
    </body>

</html>
ul.disc {
    list-style-type: disc;
}

ul.circle {
    list-style-type: circle;
}

ul.square {
    list-style-type: square;
}

ul.decimal {
    list-style-type: decimal;
}

ul.lower-alpha {
    list-style-type: lower-alpha;
}

ul.upper-alpha {
    list-style-type: upper-alpha;
}

ul.upper-roman {
    list-style-type: upper-roman;
}

div {
    border: 1px solid;
    padding: 8px;
}

Browser Output

list-style-type: disc

  • Georgia
  • New York

list-style-type: circle

  • Georgia
  • New York

list-style-type: square

  • Georgia
  • New York

list-style-type: decimal

  • Georgia
  • New York

list-style-type: lower-alpha

  • Georgia
  • New York

list-style-type: upper-alpha

  • Georgia
  • New York

list-style-type: upper-roman

  • Georgia
  • New York

The above example shows different ways to mark the list item using the list-style-type property.


CSS list-style-position Property

The list-style-position property specifies the position of the list markers in a list. The position of the list markers can be either inside or outside of a list item.

Let's see an example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS list-style-position</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <p>list-style-position: inside</p>
        <ul class="inside-list">
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>

        <p>list-style-position: outside</p>
        <ul class="outside-list">
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </body>
</html>
.inside-list {
    list-style-position: inside;
}

.outside-list {
    list-style-position: outside;
}

li {
    border: 1px solid black;
}

Browser Output

CSS List Style Position Example

In the above example,

  • list-style-position: inside positions the list markers within the list items
  • list-style-position: outside positions the list markers outside of the list items

Note: By default, the list items markers are placed outside.


CSS list-style-image Property

The list-style-image property allows us to use the custom image as the list item marker.

The syntax of the list-style-image property is:

list-style-image: none | url('image.url')

Here,

  • none: specifies no image is used as the marker
  • url('image.url'): specifies the URL of the image to be used as a marker

Let's see an example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS list-style-image</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </body>
</html>
ul {
    list-style-image: url("https://openclipart.org/image/20px/183195");
}

Browser Output

CSS List Style Image Example

In the above example,

list-style-image: url("https://openclipart.org/image/20px/183195");

specifies a custom image as the list marker for the list items.


CSS list-style Property

The list-style is a shorthand property to specify list-style-type, list-style-position, and list-style-image properties.

The syntax of the list-style property is:

list-style: [list-style-type] [list-style-position] [list-style-image]

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS list-style</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
        </ul>
    </body>

</html>
ul {
    list-style: square inside url("https://openclipart.org/image/20px/183195");
}

Browser Output

CSS List Style Example

In the above example,

list-style: square inside url('https://openclipart.org/image/20px/183195');

is equivalent to,

list-style-type: square;
list-style-position: inside;
list-style-image: url('https://openclipart.org/image/20px/183195');

Note: The list-style-type property is applied to the list item marker only if the browser can't find the specified URL.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges