CSS - list-style-type Property

Previous
Quiz
Next

CSS list-style-type property helps in setting the marker of a list item element. The color of the marker will remain same as the color of the element it applies to.

Syntax

list-style-type: disc | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian| hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | none | square | upper-alpha | upper-greek | upper-latin | upper-roman | initial | inherit;

Property Values

Value Description
disc The marker is a filled circle. Default value.
armenian The marker is traditional Armenian numbering.
circle The marker is a circle.
cjk-ideographic The marker is plain ideographic numbers.
decimal The marker is a number.
decimal-leading-zero The marker is a number with leading zeros (01, 02, 03 etc.).
georgian The marker is traditional Georgian numbering.
hebrew The marker is traditional Hebrew numbering.
hiragana The marker is traditional Hiragana numbering.
hiragana-iroha The marker is traditional Hiragana iroha numbering.
katakana The marker is traditional Katakana numbering.
katakana-iroha The marker is traditional Katakana iroha numbering.
lower-alpha The marker is lower-alpha (a, b, c etc.)
lower-greek The marker is lower-greek.
lower-latin The marker is lower-latin (a, b, c etc.)
lower-roman The marker is lower-roman (i, ii, iii etc.)
none No marker is shown.
square The marker is a square.
upper-alpha The marker is upper-alpha (A, B, C etc.)
upper-greek The marker is upper-greek.
upper-latin The marker is upper-latin (A, B, C etc.)
upper-roman The marker is upper-roman (I, II, III etc.)
initial It sets the property to its default value.
inherit It inherits the property from the parent element.

Examples of CSS List Style Type Property

The following examples explain the list-style-type property with different values.

List Style Type Property with Disc Value

The following example shows the marker of list-items with list-style-type: disc.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: disc;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: disc
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Armenian Value

The following example shows the marker of list-items with list-style-type: armenian.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: armenian;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: armenian
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Circle Value

The following example shows the marker of list-items with list-style-type: circle.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: circle;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: circle
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Cjk Ideographic Value

The following example shows the marker of list-items with list-style-type: cjk-ideographic.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: cjk-ideographic;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: cjk-ideographic
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Decimal Value

The following example shows the marker of list-items with list-style-type: decimal.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: decimal;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: decimal
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Decimal Leading Zero Value

The following example shows the marker of list-items with list-style-type: decimal-leading-zero.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: decimal-leading-zero;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: decimal-leading-zero
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Georgian Value

The following example shows the marker of list-items with list-style-type: georgian.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: georgian;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: georgian
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Hebrew Value

The following example shows the marker of list-items with list-style-type: hebrew.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: hebrew;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: hebrew
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Hiragana Value

The following example shows the marker of list-items with list-style-type: hiragana.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: hiragana;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: hiragana
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Hiragana Iroha Value

The following example shows the marker of list-items with list-style-type: hiragana-iroha.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: hiragana-iroha;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: hiragana-iroha
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Katakana Value

The following example shows the marker of list-items with list-style-type: katakana.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: katakana;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: katakana
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Katakana Iroha Value

The following example shows the marker of list-items with list-style-type: katakana-iroha.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: katakana-iroha;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: katakana-iroha
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Lower Alpha Value

The following example shows the marker of list-items with list-style-type: lower-alpha.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: lower-alpha;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: lower-alpha
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Lower Greek Value

The following example shows the marker of list-items with list-style-type: lower-greek.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: lower-greek;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: lower-greek
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Lower Latin Value

The following example shows the marker of list-items with list-style-type: lower-latin.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: lower-latin;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: lower-latin
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Lower Roman Value

The following example shows the marker of list-items with list-style-type: lower-roman.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: lower-roman;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: lower-roman
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with None Value

The following example shows the marker of list-items with list-style-type: none.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: none
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Square Value

The following example shows the marker of list-items with list-style-type: square.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: square;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: square
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Upper Alpha Value

The following example shows the marker of list-items with list-style-type: upper-alpha.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: upper-alpha;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: upper-alpha
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Upper Greek Value

The following example shows the marker of list-items with list-style-type: upper-greek.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: upper-greek;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: upper-greek
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Upper Latin Value

The following example shows the marker of list-items with list-style-type: upper-latin.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: upper-latin;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: upper-latin
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Type Property with Upper Roman Value

The following example shows the marker of list-items with list-style-type: upper-roman.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: upper-roman;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: upper-roman
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
list-style-type 1.0 4.0 1.0 1.0 3.5
css_reference.htm
Print Page
Previous
Next
Advertisements