CSS list-style-type property is used to specify the type of a list item element.
A list marker can have three types: glyphs (circle, disc, square), numbering systems, and alphabetic systems.
The marker’s color will be the same as the computed color of the element it applies to.
Only the <li> and <summary> elements have the “list-item” value of the display property. We can apply the list-style-type property to any element with display set to list-item. This property can be set on a parent element (usually <ol> or <ul>).
| Initial Value | disc |
| Applies to | List items. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.listStyleType = “armenian”; |
Syntax
list-style-type: disc | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | none | square | upper-alpha | upper-latin | upper-roman | initial | inherit;Example of the list-style-type property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul.list-styles {
list-style-type: square;
}
ul.list-styles2 {
list-style-type: hebrew;
}
</style>
</head>
<body>
<h2>List-style-type property example</h2>
<ul class="list-styles">
<li>Appetizers</li>
<li>Main Course</li>
<li>Salads</li>
</ul>
<ul class="list-styles2">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
</body>
</html>Result
Example of the list-style-type property with the “disc” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
list-style-type: disc;
}
</style>
</head>
<body>
<h1>
Example of the list-style-type property with "disc" value.
</h1>
<ul class="text">
<li>Barcelona</li>
<li>Madrid</li>
<li>London</li>
</ul>
</body>
</html>Example of the list-style-type property with the “decimal” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
list-style-type: decimal;
}
</style>
</head>
<body>
<h1>
Example of the list-style-type property
</h1>
<ul class="text">
<li>Barcelona</li>
<li>Madrid</li>
<li>London</li>
</ul>
</body>
</html>Example of the list-style-type property with ordered lists:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
ol.e {
list-style-type: armenian;
}
ol.f {
list-style-type: decimal;
}
ol.g {
list-style-type: cjk-ideographic;
}
ol.h {
list-style-type: decimal-leading-zero;
}
ol.i {
list-style-type: georgian;
}
ol.j {
list-style-type: hebrew;
}
ol.k {
list-style-type: hiragana;
}
ol.l {
list-style-type: hiragana-iroha;
}
ol.m {
list-style-type: katakana;
}
ol.n {
list-style-type: katakana-iroha;
}
ol.o {
list-style-type: lower-greek;
}
ol.p {
list-style-type: lower-latin;
}
ol.q {
list-style-type: lower-roman;
}
ol.r {
list-style-type: none;
}
ol.s {
list-style-type: upper-alpha;
}
ol.t {
list-style-type: upper-latin;
}
</style>
</head>
<body>
<h2>List-style-type property example</h2>
<p>Examples of unordered lists:</p>
<h3>Circle</h3>
<ul class="a">
<li>New York</li>
<li>Las Vegas</li>
<li>Washington</li>
</ul>
<h3>Square</h3>
<ul class="b">
<li>San Francisco</li>
<li>Los Angeles</li>
<li>Miami</li>
</ul>
<p>Examples of ordered lists:</p>
<h3>Upper-roman</h3>
<ol class="c">
<li>Barcelona</li>
<li>Madrid</li>
<li>London</li>
</ol>
<h3>Lower-alpha</h3>
<ol class="d">
<li>Dubai</li>
<li>Anu Dhabi</li>
<li>Qatar</li>
</ol>
<h3>Armenian</h3>
<ol class="e">
<li>Yerevan</li>
<li>Paris</li>
<li>Rome</li>
</ol>
<h3>Decimal</h3>
<ol class="f">
<li>Sydney</li>
<li>Honk Kong</li>
<li>Moscow</li>
</ol>
<h3>Cjk-ideographic</h3>
<ol class="g">
<li>Kiev</li>
<li>Saint-Petersburg</li>
<li>Tula</li>
</ol>
<h3>Decimal-leading-zero</h3>
<ol class="h">
<li>Bangkok</li>
<li>Gyumri</li>
<li>Valencia</li>
</ol>
<h3>Georgian</h3>
<ol class="i">
<li>Madrid</li>
<li>Barcelona</li>
<li>Prague</li>
</ol>
<h3>Hebrew</h3>
<ol class="j">
<li>Jerusalem</li>
<li>Toronto</li>
<li>Prague</li>
</ol>
<h3>Hiragana</h3>
<ol class="k">
<li>Cairo</li>
<li>Tokyo</li>
<li>Athens</li>
</ol>
<h3>Hiragana-iroha</h3>
<ol class="l">
<li>Tehran</li>
<li>Tavriz</li>
<li>Tel Aviv</li>
</ol>
<h3>Katakana</h3>
<ol class="m">
<li>Munich</li>
<li>Berlin</li>
<li>Bavaria</li>
</ol>
<h3>Katakana-iroha</h3>
<ol class="n">
<li>Brussels</li>
<li>Istanbul</li>
<li>Sydney</li>
</ol>
<h3>Lower-greek</h3>
<ol class="o">
<li>Seville</li>
<li>Granada</li>
<li>Venice</li>
</ol>
<h3>Lower-latin</h3>
<ol class="p">
<li>Budapest</li>
<li>Vienna</li>
<li>Amsterdam</li>
</ol>
<h3>Lower-roman</h3>
<ol class="q">
<li>Buenos Aires</li>
<li>Rio de Janeiro</li>
<li>San Paolo</li>
</ol>
<h3>None</h3>
<ol class="r">
<li>Vilnius</li>
<li>Tallin</li>
<li>Riga</li>
</ol>
<h3>Upper-alpha</h3>
<ol class="s">
<li>Montreal</li>
<li>Melbourne</li>
<li>Edinburgh</li>
</ol>
<h3>Upper-latin</h3>
<ol class="t">
<li>Dublin</li>
<li>Mexico</li>
<li>Florence</li>
</ol>
</body>
</html>