course icon

Lists Properties

Fundamentals Course

Introduction

CSS provides powerful properties for styling and customizing lists in web pages. Whether you are creating unordered list with bullet points or ordered list with numbers or letters, CSS offers a range of options to control thier appearance and behavior.

List-Style-Type

The list-style-type property specifies the type of marker used for list items. You can choose from a variety of predefined marker styles, including disc, circle, square, decimal, lowercase and uppercase Roman numerals, and alphabetical characters.

Style type for <ul> element:

  • disc value sets the list item marker to a bullet
    <ul style="list-style-type: disc;">
        <li> Google Chrome </li>
        <li> Mozilla Firefox </li>
        <li> Opera Browser </li>
        <li> Microsoft Edge </li>
        <li> Safari Browser </li>
    </ul>

    Output:

    disc output
  • circle value sets the list item marker to a circle
    <ul style="list-style-type: circle;">
        <li> Google Chrome </li>
        <li> Mozilla Firefox </li>
        <li> Opera Browser </li>
        <li> Microsoft Edge </li>
        <li> Safari Browser </li>
    </ul>

    Output:

    circle output
  • square value sets the list item marker to a square
    <ul style="list-style-type: square;">
        <li> Google Chrome </li>
        <li> Mozilla Firefox </li>
        <li> Opera Browser </li>
        <li> Microsoft Edge </li>
        <li> Safari Browser </li>
    </ul>

    Output:

    square output
  • none value will not display markers on list items
    <ul style="list-style-type: none;">
        <li> Google Chrome </li>
        <li> Mozilla Firefox </li>
        <li> Opera Browser </li>
        <li> Microsoft Edge </li>
        <li> Safari Browser </li>
    </ul>

    Output:

    square output

Style type for <ol> element:

  • decimal (1, 2, 3...)
    <ol style="list-style-type: decimal;">
        <li> first item </li>
        <li> second item </li>
        <li> third item </li>
        <li> fifth item </li>
        <li> sizth item </li>
    </ol>

    Output:

    deciaml output
  • decimal-leading-zero (01, 02, 03...)
    <ol style="list-style-type: decimal-leading-zero;">
        <li> first item </li>
        <li> second item </li>
        <li> third item </li>
        <li> fifth item </li>
        <li> sizth item </li>
    </ol>

    Output:

    decimal-leading-zero
  • lower-alpha (a, b, c...)
    <ol style="list-style-type: lower-alpha;">
        <li> first item </li>
        <li> second item </li>
        <li> third item </li>
        <li> fifth item </li>
        <li> sizth item </li>
    </ol>

    Output:

    lower alpha output
  • upper-alpha (A, B, C...)
    <ol style="list-style-type: upper-alpha;">
        <li> first item </li>
        <li> second item </li>
        <li> third item </li>
        <li> fifth item </li>
        <li> sizth item </li>
    </ol>

    Output:

    upper alpha output
  • lower-roman (i, ii, iii...)
    <ol style="list-style-type: lower-roman;">
        <li> first item </li>
        <li> second item </li>
        <li> third item </li>
        <li> fifth item </li>
        <li> sizth item </li>
    </ol>

    Output:

    upper roman output
  • upper-roman (I, II, III...)
    <ol style="list-style-type: upper-roman;">
        <li> first item </li>
        <li> second item </li>
        <li> third item </li>
        <li> fifth item </li>
        <li> sizth item </li>
    </ol>

    Output:

    upper roman output

List Style Image

Instead of using predefined marker styles, you can use custom images as list item markers with the list-style-image property. Simply specify the URL of the image you want to use, and it will be displayed as the marker for each list item.

<ul style="list-style-image: url('hashtag.png')">
    <li>item 1</li>
    <li>item 2</li>
</ul>

Output:

list-style-image output

List Style Position

The list-style-position property specifies the position of the list item marker in unordered lists.

The outside value means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.

<ul style="list-style-position: outside">
    <li> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut voluptatem maxime dicta consectetur impedit. </li>
    <li> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut voluptatem maxime dicta consectetur impedit. </li>
    <li> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut voluptatem maxime dicta consectetur impedit. </li>
    <li> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut voluptatem maxime dicta consectetur impedit. </li>
</ul>

Output:

list style position output1

The inside value means that the bullet points will be inside the list item. The list item will be part of the text and push the text at the start.



<ul style="list-style-position: inside">
    <li> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut voluptatem maxime dicta consectetur impedit. </li>
    <li> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut voluptatem maxime dicta consectetur impedit. </li>
    <li> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut voluptatem maxime dicta consectetur impedit. </li>
    <li> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut voluptatem maxime dicta consectetur impedit. </li>
</ul>

Output:

list style position output2

Shorthand List Style Property

The list-style property is a shorthand property. It is use to set all the list properties in one declaration.

When using the shorthand property, the order of the property values are:

  1. list-style-type
  2. list-style-position
  3. list-style-image