CSS list-style-type

The CSS list-style-type property is used to define the type of list marker. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul{list-style-type: upper-roman;}
   </style>
</head>
<body>
   
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
   </ul>
   
</body>
</html>

Output

HTML
CSS
JavaScript
Python

CSS list-style-type Syntax

The syntax of list-style-type property in CSS, is:

list-style-type: x;

The value of x should be any of the following:

circle
disc
square
lower-alpha
lower-greek
lower-latin
lower-roman
upper-alpha
upper-greek
upper-latin
upper-roman
armenian
decimal
decimal-leading-zero
georgian
hebrew
hiragana
hiragana-iroha
katakana
katakana-iroha
cjk-ideographic

Note - The first three are for unogranized list, where remaining are for organized list item markers.

Note - The disc is the default marker for unorganized list. Whereas the decimal is the default marker for organized list.

CSS list-style-type Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul.a{list-style-type: circle;}
      ul.b{list-style-type: disc;}
      ul.c{list-style-type: square;}

      ol.a{list-style-type: lower-alpha;}
      ol.b{list-style-type: lower-greek;}
      ol.c{list-style-type: lower-latin;}
      ol.d{list-style-type: lower-roman;}
      ol.e{list-style-type: upper-alpha;}
      ol.f{list-style-type: upper-greek;}
      ol.g{list-style-type: upper-latin;}
      ol.h{list-style-type: upper-roman;}
      ol.i{list-style-type: armenian;}
      ol.j{list-style-type: decimal;}
      ol.k{list-style-type: decimal-leading-zero;}
      ol.l{list-style-type: georgian;}
      ol.m{list-style-type: hebrew;}
      ol.n{list-style-type: hiragana;}
      ol.o{list-style-type: hiragana-iroha;}
      ol.p{list-style-type: katakana;}
      ol.q{list-style-type: katakana-iroha;}
      ol.r{list-style-type: cjk-ideographic;}
   </style>
</head>
<body>
   
   <h2>list-style-type: circle</h2>
   <ul class="a">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>

   <h2>list-style-type: disc</h2>
   <ul class="b">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>

   <h2>list-style-type: square</h2>
   <ul class="c">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>

   <h2>list-style-type: lower-alpha</h2>
   <ol class="a">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: lower-greek</h2>
   <ol class="b">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: lower-latin</h2>
   <ol class="c">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: lower-roman</h2>
   <ol class="d">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: upper-alpha</h2>
   <ol class="e">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: upper-greek</h2>
   <ol class="f">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: upper-latin</h2>
   <ol class="g">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: upper-roman</h2>
   <ol class="h">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: armenian</h2>
   <ol class="i">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: decimal</h2>
   <ol class="j">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: decimal-leading-zero</h2>
   <ol class="k">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: georgian</h2>
   <ol class="l">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: hebrew</h2>
   <ol class="m">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: hiragana</h2>
   <ol class="n">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: hiragana-iroha</h2>
   <ol class="o">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: katakana</h2>
   <ol class="p">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: katakana-iroha</h2>
   <ol class="q">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>

   <h2>list-style-type: cjk-ideographic</h2>
   <ol class="r">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ol>
   
</body>
</html>

Output

list-style-type: circle

CSS
HTML
JS

list-style-type: disc

CSS
HTML
JS

list-style-type: square

CSS
HTML
JS

list-style-type: lower-alpha

CSS
HTML
JS

list-style-type: lower-greek

CSS
HTML
JS

list-style-type: lower-latin

CSS
HTML
JS

list-style-type: lower-roman

CSS
HTML
JS

list-style-type: upper-alpha

CSS
HTML
JS

list-style-type: upper-greek

CSS
HTML
JS

list-style-type: upper-latin

CSS
HTML
JS

list-style-type: upper-roman

CSS
HTML
JS

list-style-type: armenian

CSS
HTML
JS

list-style-type: decimal

CSS
HTML
JS

list-style-type: decimal-leading-zero

CSS
HTML
JS

list-style-type: georgian

CSS
HTML
JS

list-style-type: hebrew

CSS
HTML
JS

list-style-type: hiragana

CSS
HTML
JS

list-style-type: hiragana-iroha

CSS
HTML
JS

list-style-type: katakana

CSS
HTML
JS

list-style-type: katakana-iroha

CSS
HTML
JS

list-style-type: cjk-ideographic

CSS
HTML
JS

CSS Online Test

« Previous Tutorial Next Tutorial »