Definition: CSS lists are used to organize your list items either in unordered lists or ordered lists. See the example of unordered lists and ordered lists in the below table.
Unordered Lists Ordered Lists ■ Banana■ Orange■ Mango■ Apple1. Banana ♡ Banana i. Banana
CSS Lists (All Properties)
CSS Lists (All Properties) 1. list-style-type 2. list-style-position 3. list-style-image 4. list-style
1. list-style-type
See the below syntax of list-style-type in the Unordered and Ordered list. list-style-tyle: none property is used to remove the predefined default settings of list bullets/numbers.
Syntax:
Unordered Lists: 1. list-style-type: circle;
Ordered Lists: 1. list-style-type: armenian;
Unordered Lists Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
ul.circle {list-style-type: circle;}
ul.disc {list-style-type: disc;}
ul.square {list-style-type: square;}
</style>
</head>
<body>
<p>Unordered lists:</p>
<ul class="circle">
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ul>
<ul class="disc">
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ul>
<ul class="square">
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ul>
</body>
</html>
Unordered Lists Output:
Ordered Lists Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
ol.armenian {list-style-type: armenian;}
ol.cjk-ideographic {list-style-type: cjk-ideographic;}
ol.decimal {list-style-type: decimal;}
ol.decimal-leading-zero {list-style-type: decimal-leading-zero;}
ol.georgian {list-style-type: georgian;}
ol.hebrew {list-style-type: hebrew;}
ol.hiragana {list-style-type: hiragana;}
ol.hiragana-iroha {list-style-type: hiragana-iroha;}
ol.katakana {list-style-type: katakana;}
ol.katakana-iroha {list-style-type: katakana-iroha;}
ol.lower-alpha {list-style-type: lower-alpha;}
ol.lower-greek {list-style-type: lower-greek;}
ol.lower-latin {list-style-type: lower-latin;}
ol.lower-roman {list-style-type: lower-roman;}
ol.upper-alpha {list-style-type: upper-alpha;}
ol.upper-latin {list-style-type: upper-latin;}
ol.upper-roman {list-style-type: upper-roman;}
ol.none {list-style-type: none;}
ol.inherit {list-style-type: inherit;}
</style>
</head>
<body>
<p> Ordered Lists:</p>
<b> 1. armenian</b>
<ol class="armenian">
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="cjk-ideographic">
<b> 2. cjk-ideographic</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="decimal">
<b> 3. decimal</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="decimal-leading-zero">
<b> 4. decimal-leading-zero</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="georgian">
<b> 5. georgian</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="hebrew">
<b> 6. hebrew</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="hiragana">
<b> 7. hiragana</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="hiragana-iroha">
<b> 8. hiragana-iroha</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="katakana">
<b> 9. katakana</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="katakana-iroha">
<b> 10. katakana-iroha</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="lower-alpha">
<b> 11. lower-alpha</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="lower-greek">
<b> 12. lower-greek</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="lower-latin">
<b> 13. lower-latin</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="lower-roman">
<b> 14. lower-roman</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="upper-alpha">
<b> 15. upper-alpha</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="upper-latin">
<b> 16. upper-latin</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="upper-roman">
<b> 17. upper-roman</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="none">
<b> 18. none</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
<ol class="inherit">
<b> 19. inherit</b>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
</body>
</html>
Ordered Lists Output:
2. list-style-position:
list-style-position property specifies the position of lists. The lists of bullets/numbers can be outside the list item or inside the list items. See the below example of using list-item-position.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
ul.inside {
list-style-position: inside;
}
ul.outside {
list-style-position: outside;
}
</style>
</head>
<body>
<p><b>Inside list position:</b></p>
<ul class="inside">
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ul>
<p><b>Outside list position:</b></p>
<ul class="outside">
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ul>
</body>
</html>
Output:
3. list-style-image:
If you want to use your own custom image list items then you can use the list-style-image property. See the source code below for using your own custom image list items.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.list-style-image{
list-style-image: url('https://www.elsebazaar.com/blog/wp-content/uploads/2020/07/heart30x30.jpg');
list-style-position: inside;
}
</style>
</head>
<body>
<ul class="list-style-image">
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ul>
</body>
</html>
Output:
4. list-style: Shorthand Property
list-style property is a shorthand property, where you declare all list-style properties. Let’s see the below example.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.list-style1{
list-style: circle inside;
}
</style>
</head>
<body>
<ul class="list-style1">
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ul>
</body>
</html>
Output:
