CSS - list-style-type Property

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
list-style-type	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page