Tutorials


CSS list-style-type property


The list-style-type property in CSS is used to define the type of marker that appears for list items in an ordered list (<ol>) or an unordered list (<ul>). This property determines the style of the list item markers, which can be circles, squares, numbers, letters, or other types of markers.

Syntax

selector {
  list-style-type: type;
}
  • selector: The element to which you want to apply the list style (e.g., ul, ol).
  • type: The style of the marker for the list items.

Values

The list-style-type property accepts several values depending on whether you are styling an ordered list or an unordered list:

For Unordered Lists (<ul>)

  • disc: A filled circle (default style).
  • circle: An empty circle.
  • square: A filled square.
  • none: No marker is displayed.

For Ordered Lists (<ol>)

  • decimal: Numbers (default style).
  • decimal-leading-zero: Numbers with a leading zero (e.g., 01, 02).
  • lower-roman: Lowercase Roman numerals (i, ii, iii).
  • upper-roman: Uppercase Roman numerals (I, II, III).
  • lower-alpha or lower-latin: Lowercase letters (a, b, c).
  • upper-alpha or upper-latin: Uppercase letters (A, B, C).
  • lower-greek: Lowercase Greek letters (α, β, γ). (Note: Less commonly used and may have limited support.)
  • none: No marker is displayed.

Examples

Unordered List Example

ul {
  list-style-type: circle;
}
  • This example sets the marker for list items in unordered lists to be an empty circle.

Ordered List Example

ol {
  list-style-type: upper-roman;
}
  • This example sets the marker for list items in ordered lists to use uppercase Roman numerals.

Combining with Other Properties

You can use list-style-type along with other list-related properties for more control:

ul.custom {
  list-style-type: square;
  list-style-position: inside;
  list-style-image: url('custom-marker.png');
}
  • list-style-type: Sets the marker to a filled square.
  • list-style-position: Positions the marker inside the content area.
  • list-style-image: Uses a custom image for the marker.

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Style Type Example</title>
  <style>
    ul.disc {
      list-style-type: disc;
    }

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

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

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

    ol.roman {
      list-style-type: upper-roman;
    }
  </style>
</head>
<body>
  <ul class="disc">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <ul class="circle">
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
  </ul>

  <ul class="square">
    <li>Item X</li>
    <li>Item Y</li>
    <li>Item Z</li>
  </ul>

  <ol class="decimal">
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
  </ol>

  <ol class="roman">
    <li>Chapter I</li>
    <li>Chapter II</li>
    <li>Chapter III</li>
  </ol>
</body>
</html>

Explanation:

  • ul.disc: Uses a filled circle as the marker.
  • ul.circle: Uses an empty circle as the marker.
  • ul.square: Uses a filled square as the marker.
  • ol.decimal: Uses decimal numbers for the list items.
  • ol.roman: Uses uppercase Roman numerals for the list items.

Important Points

  1. Inheritance:

    • The list-style-type property does not inherit styles from parent elements. You need to apply it directly to the list elements you want to style.

  2. No Markers with none:

    • Setting list-style-type to none will remove the markers, but the list items will still be displayed in a block format.

  3. Shorthand:

    • list-style is a shorthand property that combines list-style-type, list-style-position, and list-style-image. You can use it to set multiple list-related properties at once.

  4. Browser Compatibility:

    • list-style-type is widely supported across modern browsers, ensuring consistent styling for lists.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about