list-style-type
sets the type of marker system of a list.
Item | Value |
---|---|
Initial value | disc |
Inherited | Yes. |
Version | CSS1 |
JavaScript syntax | object.style.listStyleType="square" |
Applies to | Elements whose display value is list-item. |
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
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 |
list-style-type |
Yes | Yes | Yes | Yes | Yes |
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>
<!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>