List-style-type

CSS list-style-type property defines the type of a list item element.

Even if it is usually <li> element which is default to display list-item; any other element with display value can also be instead of it.

The marker's color will be the same the computed color of the element it applies to.

CSS Syntax

list-style-type: value;

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
     <style>
        ul.a {list-style-type: square;}
        ol.b {list-style-type: hebrew;}
        ol.c{list-style-type: armenian;}
     </style>
   </head>
   <body>

      <h2>Example for an unordered lists:</h2>

      <ul>
          <li>Appetizers</li>
          <li>Main Course</li>
          <li>Salads</li>
      </ul>

       <ul class="a">
          <li>Cold Drinks</li>
          <li>Hot Drinks</li>
          <li>Ice-Creams</li>
      </ul>

       <h2>Example for an ordered lists:</h2>

       <ol class="b">
            <li>Espresso</li>
            <li>Coffee</li>
           <li>Tea</li>
      </ol>

       <ol class="c">
           <li>Coca-Cola</li>
           <li>Fanta</li>
           <li>Ice Tea</li>
       </ol>

   </body>
</html>

Here the result is:



Property Values

Value Descriptions
disc It creates marker as a filled circle. It is the default value of this property.
armenian It creates marker as a traditional Armenian numbering.
circle It creates marker as a circle.
cjk-ideographic It creates marker which is a plain ideographic numbers.
decimal It creates marker as a number.
decimal-leading-zero It creates marker as a number with leading zero such as 01,02,05...
georgian It creates marker as a traditional Georgian numbering.
hebrew It creates marker as a traditional Hebrew numbering.
hiragana It creates marker as a traditional Hiragana numbering.
hiragana-iroha It creates marker as a traditional Hiragana iroha numbering.
katakana It creates marker as a traditional Katakana numbering.
katakana-iroha It creates marker as a traditional Katakana iroha numbering.
lower-alpha It creates marker as lower-alpha such as a,b,c,d...
lower-greek It creates marker as lower-greek.
lower-latin It creates marker as lower-latin such as a,b,c,d...
lower-roman It creates marker as lower-roman such as i,ii,iii,iv...
none It means that the marker won't be shown.
square It creates marker as a square.
upper-alpha It creates marker as upper-alpha such as A,B,C,D...
upper-latin It creates marker as upper-latin such as A,B,C,D...
upper-roman It creates marker as upper-roman such as I,II,III,IV,V...
initial It makes the property use its default value.
inherit It inherits the property from its parents element.