Jobs Hub

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:

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

  1. CSS
  2. HTML
  3. JS

list-style-type: lower-greek

  1. CSS
  2. HTML
  3. JS

list-style-type: lower-latin

  1. CSS
  2. HTML
  3. JS

list-style-type: lower-roman

  1. CSS
  2. HTML
  3. JS

list-style-type: upper-alpha

  1. CSS
  2. HTML
  3. JS

list-style-type: upper-greek

  1. CSS
  2. HTML
  3. JS

list-style-type: upper-latin

  1. CSS
  2. HTML
  3. JS

list-style-type: upper-roman

  1. CSS
  2. HTML
  3. JS

list-style-type: armenian

  1. CSS
  2. HTML
  3. JS

list-style-type: decimal

  1. CSS
  2. HTML
  3. JS

list-style-type: decimal-leading-zero

  1. CSS
  2. HTML
  3. JS

list-style-type: georgian

  1. CSS
  2. HTML
  3. JS

list-style-type: hebrew

  1. CSS
  2. HTML
  3. JS

list-style-type: hiragana

  1. CSS
  2. HTML
  3. JS

list-style-type: hiragana-iroha

  1. CSS
  2. HTML
  3. JS

list-style-type: katakana

  1. CSS
  2. HTML
  3. JS

list-style-type: katakana-iroha

  1. CSS
  2. HTML
  3. JS

list-style-type: cjk-ideographic

  1. CSS
  2. HTML
  3. JS

CSS Online Test

« Previous Tutorial Next Tutorial »