List Style Type

Customize the list item markers in ordered and unordered lists using the list-style-type property.

Unordered List

The list-style-type property is used to define the style of the list item marker.

The following values below explains how to change the marker for unordered list items.

Disc

The disc value sets the list item marker to a bullet.

<body>
  <h1>Most Popular Web Browsers</h1>
  <ul style="list-style-type: disc;">
    <li>Mozilla Firefox</li>
    <li>Google Chrome</li>
    <li>Opera Browser</li>
    <li>Microsoft Edge</li>
    <li>Safari Browser</li>
  </ul>
</body>

Circle

The circle value sets the list item marker to a circle.

<body>
  <h1>Most Popular Web Browsers</h1>
  <ul style="list-style-type: circle;">
    <li>Mozilla Firefox</li>
    <li>Google Chrome</li>
    <li>Opera Browser</li>
    <li>Microsoft Edge</li>
    <li>Safari Browser</li>
  </ul>
</body>

Square

The square value sets the list item marker to a square.

<body>
  <h1>Most Popular Web Browsers</h1>
  <ul style="list-style-type: square;">
    <li>Mozilla Firefox</li>
    <li>Google Chrome</li>
    <li>Opera Browser</li>
    <li>Microsoft Edge</li>
    <li>Safari Browser</li>
  </ul>
</body>

None

The none value will not display markers on list items.

<body>
  <h1>Most Popular Web Browsers</h1>
  <ul style="list-style-type: none;">
    <li>Mozilla Firefox</li>
    <li>Google Chrome</li>
    <li>Opera Browser</li>
    <li>Microsoft Edge</li>
    <li>Safari Browser</li>
  </ul>
</body>

Ordered List

The following values sets the marker for ordered list items.

Lower Alpha

The lower-alpha value is used to set the marker of a list item in lowercase letters.

<body>
  <h1>Phases of WDLC</h1>
  <ol style="list-style-type: lower-alpha;">
    <li>Planning</li>
    <li>Analysis</li>
    <li>Design</li>
    <li>Development</li>
    <li>Testing</li>
    <li>Implementation</li>
    <li>Maintenance</li>
  </ol>
</body>

Upper Alpha

The upper-alpha value is used to set the marker of a list item in uppercase letters.

<body>
  <h1>Phases of WDLC</h1>
  <ol style="list-style-type: upper-alpha;">
    <li>Planning</li>
    <li>Analysis</li>
    <li>Design</li>
    <li>Development</li>
    <li>Testing</li>
    <li>Implementation</li>
    <li>Maintenance</li>
  </ol>
</body>

Lower Roman

The lower-roman value is used to set the marker of a list item in lowercase roman numbers.

<body>
  <h1>Phases of WDLC</h1>
  <ol style="list-style-type: lower-roman;">
    <li>Planning</li>
    <li>Analysis</li>
    <li>Design</li>
    <li>Development</li>
    <li>Testing</li>
    <li>Implementation</li>
    <li>Maintenance</li>
  </ol>
</body>

Upper Roman

The upper-roman value is used to set the marker of a list item in uppercase roman numbers.

<body>
  <h1>Phases of WDLC</h1>
  <ol style="list-style-type: upper-roman;">
    <li>Planning</li>
    <li>Analysis</li>
    <li>Design</li>
    <li>Development</li>
    <li>Testing</li>
    <li>Implementation</li>
    <li>Maintenance</li>
  </ol>
</body>

List Style Type

On this page