The list-style-type property sets the type of the list item marker.
This property can apply to the UL, OL, and LI element.
ul {
list-style-type: square;
}
ol {
list-style-type: upper-alpha;
}
Property |
Value |
Example |
list-style-type |
CSS1 |
none |
- First list item
- Second list item
- Third list item
|
disc |
- First list item
- Second list item
- Third list item
|
circle |
- First list item
- Second list item
- Third list item
|
square |
- First list item
- Second list item
- Third list item
|
decimal |
- First list item
- Second list item
- Third list item
|
upper-alpha |
- First list item
- Second list item
- Third list item
|
lower-alpha |
- First list item
- Second list item
- Third list item
|
upper-roman |
- First list item
- Second list item
- Third list item
|
lower-roman |
- First list item
- Second list item
- Third list item
|
CSS2 |
decimal-leading-zero |
- First list item
- Second list item
- Third list item
|
lower-greek |
- First list item
- Second list item
- Third list item
|
upper-latin |
- First list item
- Second list item
- Third list item
|
lower-latin |
- First list item
- Second list item
- Third list item
|
hebrew |
- First list item
- Second list item
- Third list item
|
armenian |
- First list item
- Second list item
- Third list item
|
georgian |
- First list item
- Second list item
- Third list item
|
cjk-ideographic |
- First list item
- Second list item
- Third list item
|
hiragana |
- First list item
- Second list item
- Third list item
|
katakana |
- First list item
- Second list item
- Third list item
|
hiragana-iroha |
- First list item
- Second list item
- Third list item
|
katakana-iroha |
- First list item
- Second list item
- Third list item
|
Example
<html>
<head>
<title>TAG index</title>
<style type="text/css">
ul { list-style-type: square; }
ol { list-style-type: upper-alpha; }
</style>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
<ol>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ol>
</body>
</html>
- Output
-
- First list item
- Second list item
- Third list item
- First list item
- Second list item
- Third list item