CSS list-style-type property
CSS List list-style-type Property
Description
The list-style-type property sets the count (or marker) style used in list item markers.
Possible Values
The following values are accepted for unordered lists:
| Order Number | Value and Description |
|---|---|
| 1 | none None |
| 2 | disc (default) A filled circle |
| 3 | circle A hollow circle |
| 4 | square A filled square |
The following values can be used for ordered lists −
| Value | Description | Example |
|---|---|---|
| decimal | Numbers | 1,2,3,4,5 |
| decimal-leading-zero | Numbers with leading zeros | 01, 02, 03, 04, 05 |
| lower-alpha | Lowercase alphanumeric characters | a, b, c, d, e |
| upper-alpha | Uppercase alphanumeric characters | A, B, C, D, E |
| lower-roman | Lowercase Roman numerals | i, ii, iii, iv, v |
| upper-roman | Uppercase Roman numerals | I, II, III, IV, V |
| lower-greek | Greek lowercase letters | alpha, beta, gamma |
| lower-latin | Marks lowercase Latin letters | a, b, c, d, e |
| upper-latin | Marks uppercase Latin letters | A, B, C, D, E |
| hebrew | Marked as traditional Hebrew numerals | |
| armenian | Marked as traditional Armenian numerals | |
| georgian | Marked as traditional Georgian numerals | |
| cjk-ideographic | Marked as purely ideographic numerals | |
| hiragana | Marked as hiragana | a, i, u, e, o, ka, ki |
| katakana | The tag is katakana | A, I, U, E, O, KA, KI |
| hiragana-iroha | The tag is hiragana-iroha | i, ro, ha, ni, ho, he, to |
| katakana-iroha | The tag is katakana-iroha | I, RO, HA, NI, HO, HE, TO |
Applies to
All elements that display list items.
DOM syntax
object.style.listStyleType = "decimal"
Example
This is an example –
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li> <li>Physics</li>
</ol>
</body>
</html>
This will produce the following:
