List Properties in CSS

• In CSS, the "list" properties are used to style ordered and unordered lists. These properties allow you to customize the appearance of list items, such as bullet styles, numbering styles, and positioning.

list-style-type:

• This property specifies the type of marker or numbering style to be used for the list items. It accepts various values, including:

• none: No marker or numbering is displayed.
• unset: Displays a default style type.
• disc: Displays a filled circle as a bullet.
• circle: Displays an unfilled circle as a bullet.
• square: Displays a square as a bullet.
• decimal: Displays decimal numbers (1, 2, 3, etc.) as the list item markers for ordered lists.
• decimal-leading-zero: Displays decimal numbers with leading zeros (01, 02, 03, etc.).
• lower-roman: Displays lowercase Roman numerals (i, ii, iii, etc.) as the list item markers.
• upper-roman: Displays uppercase Roman numerals (I, II, III, etc.).
• lower-alpha: Displays lowercase letters (a, b, c, etc.) as the list item markers.
• upper-alpha: Displays uppercase letters (A, B, C, etc.).
• lower-greek: Displays greek words like, alpha, beta, gama etc.

• Example usage:

    ul {

        list-style-type: square;

    }

    ol {

        list-style-type: lower-roman;

    }

list-style-position:

• This property determines the position of the list item marker or numbering. It has two possible values:

• inside: The marker or numbering appears inside the content flow of the list item.
• outside: The marker or numbering appears outside the content flow of the list item.

• Example usage:

    ul {

        list-style-position: inside;

    }

    ol {

        list-style-position: outside;

    }

• list-style-image: This property allows you to use a custom image as the marker for list items. You can specify a URL to an image file or use the `none` value to remove the default marker. The image will be used instead of the marker specified by the `list-style-type` property.

• Example usage:

    ul {

        list-style-image: url('bullet.png');

    }

• These properties can be applied to both unordered lists (`<ul>`) and ordered lists (`<ol>`). You can apply them directly to the list itself or target specific list items using the `li` selector.

• Example usage:

    <ul>

        <li>Item 1</li>

        <li>Item 2</li>

        <li>Item 3</li>

    </ul>

    <ol>

        <li>Item 1</li>

        <li>Item 2</li>

        <li>Item 3</li>

    </ol>

    ul {

        list-style-type: square;

    }

    ol {

        list-style-type: lower-roman;

    }

• In the above example, the unordered list will display square bullets as markers, while the ordered list will display lowercase Roman numerals as markers.