CSS for List


Lists can be styled using various properties. These properties apply to both ordered lists (<ol>) and unordered lists (<ul>).

  1. list-style-type

Specifies the type of list item marker (bullet or number).

Values:

  • disc: Solid circle (default for unordered lists)
  • circle: Hollow circle
  • square: Solid square
  • decimal: Numbers (default for ordered lists)
  • lower-alpha: Lowercase letters (a, b, c, …)
  • upper-alpha: Uppercase letters (A, B, C, …)
  • lower-roman: Lowercase Roman numerals (i, ii, iii, …)
  • upper-roman: Uppercase Roman numerals (I, II, III, …)
  • none: No marker

Example:

ul {
    list-style-type: square; /* Square bullets */
}

ol {
    list-style-type: upper-alpha; /* Uppercase letters */
}

 

  1. list-style-position

Specifies the position of the list item marker relative to the content.

Values:

  • inside: The marker is inside the content area. This affects the text flow.
  • outside: The marker is outside the content area. This does not affect the text flow.

Example:

ul {
    list-style-position: inside; /* Marker inside the content area */
}

ol {
    list-style-position: outside; /* Marker outside the content area */
}

 

  1. list-style-image

Specifies an image as the list item marker.

Example:

ul {
    list-style-image: url(‘custom-bullet.png’); /* Custom image as list marker */
}

 

  1. list-style

A shorthand property for setting list-style-type, list-style-position, and list-style-image all at once.

Syntax:

list-style: type position image;

Example:

ul {
    list-style: square inside url(‘custom-bullet.png’);
    /* Square bullets, image as marker, marker inside the content area */
}

EXAMPLE TO SHOW LIST

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>List Properties Example</title>
    <style>
        /* Unordered List Properties */
        .unordered-list {
            list-style-type: square; /* Bullet type */
            margin: 20px;
            padding-left: 40px;
        }

        .unordered-list li {
            color: darkblue;
            font-size: 18px;
        }

        /* Ordered List Properties */
        .ordered-list {
            list-style-type: upper-roman; /* Roman numerals */
            margin: 20px;
            padding-left: 40px;
        }

        .ordered-list li {
            color: darkgreen;
            font-size: 18px;
        }

        /* Nested Lists */
        .nested-list {
            list-style-type: circle;
            margin-left: 20px;
        }

        /* List with custom image */
        .custom-image-list {
            list-style-image: url(‘https://via.placeholder.com/15’); /* Custom bullet image */
            margin: 20px;
            padding-left: 40px;
        }

        /* Description List Properties */
        .description-list dt {
            font-weight: bold;
            color: darkred;
            margin-top: 10px;
        }

        .description-list dd {
            margin-left: 20px;
            color: gray;
        }

    </style>
</head>
<body>
    <h4>CSS List Properties Example</h4>

    <!– Unordered List –>
    <h5>Unordered List</h5>
    <ul class=”unordered-list”>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <!– Ordered List –>
    <h5>Ordered List</h5>
    <ol class=”ordered-list”>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
    </ol>

    <!– Nested List –>
    <h5>Nested List</h5>
    <ul class=”unordered-list”>
        <li>Main Item 1
            <ul class=”nested-list”>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
            </ul>
        </li>
        <li>Main Item 2</li>
    </ul>

    <!– List with Custom Image –>
    <h5>List with Custom Image</h5>
    <ul class=”custom-image-list”>
        <li>Custom Bullet 1</li>
        <li>Custom Bullet 2</li>
        <li>Custom Bullet 3</li>
    </ul>

    <!– Description List –>
    <h5>Description List</h5>
    <dl class=”description-list”>
        <dt>HTML</dt>
        <dd>HyperText Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
        <dt>JavaScript</dt>
        <dd>Programming language for web development</dd>
    </dl>
</body>
</html>


OUTPUT

List Properties Example

CSS List Properties Example

Unordered List
  • Item 1
  • Item 2
  • Item 3
Ordered List
  1. First Item
  2. Second Item
  3. Third Item
Nested List
  • Main Item 1
    • Sub Item 1
    • Sub Item 2
  • Main Item 2
List with Custom Image
  • Custom Bullet 1
  • Custom Bullet 2
  • Custom Bullet 3
Description List
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
JavaScript
Programming language for web development
Scroll to Top