CSS Lists

Please Share On:

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 ListsOrdered Lists
■ Banana
■ Orange
■ Mango
■ Apple		1. Banana
2. Orange
3. Mango
4. Apple
♡ Banana
♡ Orange
♡ Mango
♡ Apple		i. Banana
ii. Orange
iii. Mango
iv. Apple

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;
2. list-style-type: disc;
3. list-style-type: square;
Ordered Lists:
1. list-style-type: armenian;
2. list-style-type: cjk-ideographic;
3. list-style-type: decimal;
4. list-style-type: decimal-leading-zero;
5. list-style-type: georgian;
6. list-style-type: hebrew;
7. list-style-type: hiragana;
8. list-style-type: hiragana-iroha;
9. list-style-type: katakana;
10. list-style-type: katakana-iroha;
11. list-style-type: lower-alpha;
12. list-style-type: lower-greek;
13. list-style-type: lower-latin;
14. list-style-type: lower-roman;
15. list-style-type: upper-alpha;
16. list-style-type: upper-latin;
17. list-style-type: upper-roman;
18. list-style-type: none;
19. list-style-type: inherit;

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:

TRy it yourself

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:

try it youself

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:

try it yourself

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:

try it yourself

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:

try it yourself
Post Views: 2,768

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial