CSS Property list-style-type








list-style-type sets the type of marker system of a list.

Summary

ItemValue
Initial value disc
Inherited Yes.
Version CSS1
JavaScript syntax object.style.listStyleType="square"
Applies to Elements whose display value is list-item.




CSS Syntax

list-style-type: disc | 
                 circle | 
                 square | 
                 decimal | 
                 decimal-leading-zero |   
                 lower-roman | 
                 upper-roman | 
                 lower-greek | 
                 lower-latin |   
                 upper-latin | 
                 armenian | 
                 georgian | 
                 lower-alpha |   
                 upper-alpha | 
                 none | 
                 inherit 




Property Values

The property values are listed in the following table.

Value Description
circle a circle
decimal a number. This is default for
    decimal-leading-zero a number with leading zeros (01, 02, 03, etc.)
    disc a filled circle. This is default for
      georgian Georgian numbering
      lower-alpha lower-alpha (a, b, c, d, e, etc.)
      lower-greek lower-greek
      lower-latin lower-latin (a, b, c, d, e, etc.)
      lower-roman lower-roman (i, ii, iii, iv, v, etc.)
      none No marker
      square a square
      upper-alpha upper-alpha (A, B, C, D, E, etc.)
      upper-latin upper-latin (A, B, C, D, E, etc.)
      upper-roman upper-roman (I, II, III, IV, V, etc.)
      inherit Inherit the listStyleType property from parent element

      Browser compatibility

      list-style-type Yes Yes Yes Yes Yes

      Example

      An example showing how to use list-style-type CSS property.

      <!DOCTYPE HTML>
      <html>
          <head>
              <style>
                  ol {<!--   w ww.  ja va2  s .  c  o  m-->
                      font-family: sans-serif;
                      list-style-type: upper-greek;
                  }
              </style>
          </head>
          <body>
              <ol>
                  <li>This is the first list item.</li>
                  <li>This is the second list item.</li>
                  <li>This is the third list item.</li>
                  <li>This is the fourth list item.</li>
                  <li>This is the fifth list item.</li>
              </ol>
          </body>
      </html>

      Click to view the demo

      Example 2

      <!DOCTYPE HTML> 
      <html> 
      <head> 
          <style> 
              ol { <!--from w  w  w.  j a  v a  2  s  . c  o  m-->
                  list-style-type: lower-alpha; 
              } 
          </style> 
      </head> 
      <body> 
          This is a test: 
          <ol> 
              <li>A</li> 
              <li>B</li> 
              <li>C</li> 
              <li>D</li> 
              <li>E</li> 
              <li>F</li> 
          </ol> 
      </body> 
      </html>

      Click to view the demo