CSS2 » Properties » list-style-type

Version: Level 1/Expanded in Level2

Compability: IE4+  N4+
The level 2 values are currently not recognized by any browser.

Syntax:
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
upper-latin (Level 2)
The upper-latin value uses upper-case Latin characters as markers.
lower-latin (Level 2)
The lower-latin value uses lower-case Latin characters as markers.
katakana-iroha (Level 2)
The katakana-iroha value uses the Japanese Katakana-iroha ordering as markers.
katakana (Level 2)
The katakana values uses the Japanese Katakana character list as markers.
hiragana-iroha (Level 2)
The hiragana-iroha value uses the Japanese Hiragana-iroha ordering as markers.
hiragana (Level 2)
The hiragana value uses the Japanese Hiragana character list as markers.
hebrew (Level 2)
The hebrew value uses traditional Hebrew numbers as markers.
lower-greek (Level 2)
The lower-greek value uses classic lower-case Greek characters as markers.
georgian (Level 2)
The georgian value uses tradition Georgian numbers as markers.
cjk-ideographic (Level 2)
The cjk-ideographic value uses plain ideographic numbers as markers.
armenian (Level 2)
The armenian value uses traditional Armenian numbers as markers.
square (Level 1)
  • This is a square.
upper-roman (Level 1)
  • This is upper-Roman (i, Ii, IIi, IV, etc.).
lower-roman (Level 1)
  • This is lower-Roman (i, ii, iii, iv, etc.).
none (Level 1)
  • This is no marker.
disc (Level 1)
  • This is a disc marker. It is the default marker.
decimal (Level 1)
  • This is decimal (1, 2, 3, etc.).
circle (Level 1)
  • This is a circle.
upper-alpha (Level 1)
  • This is upper-alpha (A, B, C, etc.).
lower-alpha (Level 1)
  • This is lower-alpha (a, b, c, etc.).

The list-style-type property allows you to select the type of list-item marker that you use in a listing. This property is inherited.

There are three types of list-item markers: alphabetic, glyphs, and numeric. For unordered lists, you can choose disc, circle, or square. For ordered lists, you can select any of the alphabetic or numeric values. For any type of list, you can choose none.

This property only applies to elements with display values of list-item.
 
Many browsers will only recognize and display the solid black disc, regardless of the list-item marker you select.
 

Examples

Code:
li { list-style-type: disc; }
li { list-style-type: circle; }
li { list-style-type: square; }
li { list-style-type: decimal; }
li { list-style-type: lower-roman; }
li { list-style-type: upper-roman; }
li { list-style-type: lower-alpha; }
li { list-style-type: upper-alpha; }
li { list-style-type: none; }
Language(s): CSS2
Code:
<li style="list-style-type: square"> ADO </li>
<li style="list-style-type: square"> ASP </li>
<li style="list-style-type: square"> WML </li>
<li style="list-style-type: square"> WSH </li>
Output:
  • ADO
  • ASP
  • WML
  • WSH
  • Language(s): CSS2

    See Also: