Lists

In CSS, you can style and customize lists, such as unordered lists (<ul>) and ordered lists (<ol>), as well as list items (<li>), to fit your design requirements. Here are some common CSS properties and techniques for styling lists:

HTML Lists:

Two types of lists in HTML -ordered list( <ol>) and ordered and unordered list(<ul>).

Ordered List:

Ordered lists are used to present a list of items in a specific order, and they typically display each item with a number or another ordered marker.

Example:

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

Output:

First
Second
Third

Unordered lists:

Unordered lists are used to present a list of items where the order of the items doesn't matter. They are typically displayed with bullet points, but you can customize the style using CSS.

Example:

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

Output:

First
Second
Third

CSS Lists-properties:

List Style Type:

You can change the bullet or numbering style of the list items using the list-style-type property.

ul {
 list-style-type: disc;         /* Unordered list items (default) */
}
ol {
 list-style-type: decimal;      /* Ordered list items (default) */
}

List Style Position:

You can control the position of the list marker (bullet or number) using the list-style-position property. The values can be inside or outside.

ul {
list-style-position: inside; 
/* Place markers inside the list item */
}
ol {
list-style-position: outside; 
/* Place markers outside the list item (default) */
}

List Style Image:

You can use a custom image as the list marker by specifying the list-style-image property. This is often used to create custom bullets.

ul {
list-style-image: url('custom-bullet.png');
}
/* Or, you can use CSS generated content to create custom bullets */
ul {
list-style-type: none;
}
ul li::before {
content: "•";
margin-right: 5px;
}

Styling List Items (<li>)

You can apply styles directly to the list items within the unordered or ordered list. Common properties include:

Margin and Padding:

You can control the spacing around each list item using margin and padding.

li {
margin: 10px 0; /* Adds margin above and below each list item */
padding: 5px; /* Adds padding inside each list item */
}

Unordered lists Example:

<html>

<head>
    <style>
        ul.a {
            list-style-type: circle;
        }

        ul.b {
            list-style-type: square;
        }
    </style>
</head>

<body>
    <h2>Unordered List Example</h2>
    <ul class="a">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
    <ul class="b">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
</body>

</html>

Output:

Unordered List Example

First
Second
Third

First
Second
Third

Ordered Lists Example:

<HTML>

<head>
    <style>
        ol.a {
            list-style-type: decimal;
        }

        ol.b {
            list-style-type: lower-alpha;
        }
    </style>
</head>

<body>
    <h2>Ordered List Example</h2>
    <ol class="a">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ol>

    <ol class="b">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ol>
</body>

</html>