CSS list-style-type property is used to describe type of list item marker in a list. Its initial value is disc. The value of list-style-type can also be specified in shorthand property list-style.
CSS property list-style-type
| CSS version: | CSS 2.1 |
| Value: | 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 |
| Initial: | disc |
| Applies to: | elements with 'display: list-item' |
| Inherited: | yes |
list-style-type value behaviour
This property specifies appearance of the list item marker if ‘list-style-image’ has the value ‘none’ or if the image pointed to by the URI cannot be displayed.
list-style-type values
There are mainly three types of markers.
- Glyphs: specified with disc, circle, and square
- numbering systems:
decimal Decimal numbers, beginning with 1. decimal-leading-zero Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99). lower-roman Lowercase roman numerals (i, ii, iii, iv, v, etc.). upper-roman Uppercase roman numerals (I, II, III, IV, V, etc.). georgian Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...). armenian Traditional uppercase Armenian numbering.
- alphabetic:
lower-latin or lower-alpha Lowercase ascii letters (a, b, c, ... z). upper-latin or upper-alpha Uppercase ascii letters (A, B, C, ... Z). lower-greek Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...)
Note that when using unordered list (ul) tag with numbered values (decimal, etc.), the number markers will appear. So list-style-type value will override the default behaviour of ul (or ol) tag.
Content as marker
CSS 3 mentions setting content as marker. This is not supported by most browsers yet.
Examples – list-style-type – disc, square and circle
In the following code, CSS property list-style-type can be changed to the following values
- disc
- square
- circle
<style>
ul {
background-color: lightgreen;
width: 200px;
list-style-type:disc; /*default for ul is disc*/
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>list-style-type refresh
Examples – list-style-type – numeric values
In the following code, CSS property list-style-type can be changed to the following values
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- georgian
- armenian
<style>
ol {
background-color: lightgreen;
width: 200px;
list-style-type:decimal;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>list-style-type refresh
Example – list-style-type – alphabetic values
In the following code, CSS property list-style-type can be changed to the following values
- lower-alpha
- upper-alpha
- lower-greek
<style>
ol {
background-color: lightgreen;
width: 200px;
list-style-type:lower-alpha;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>list-style-type refresh
Related
- CSS list-style - shorthand for list marker type, image and position
- CSS list-style-position - specify if list markers will be outside or inside
- CSS list-style-image - use image as marker in list
- HTML li tag
- HTML ol tag
- HTML ul tag
