CSS list-style-type Property
Last Updated :
27 Aug, 2024
Improve
The list-style-type property is used to customize the look of list item markers, offering various options for discs, circles, squares, and more.
Syntax:
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | none | inherit;Property Values:
disc | This is the default value. The marker is a filled circle. |
circle | The marker is a hollow circle. |
square | The marker is a square. |
decimal | The marker is a decimal number, beginning with 1. |
lower-roman | The marker is a lowercase Roman numeral (i, ii, iii, iv, v, etc.). |
upper-roman | The marker is uppercase Roman numerals (I, II, III, IV, V, etc.). |
lower-greek | The marker is a lowercase classical Greek alpha, beta, gamma, ... (??, ?...). |
upper-Latin | The marker is an uppercase ASCII letter (A, B, C, ... Z). |
lower-Latin | The marker is a lowercase ASCII letter (a, b, c, ... z). |
none | No marker is shown in this mode. |
Example 1: In this example, we are using list-style-type: disc; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: disc;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: disc;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
<html><head> <title>CSS list-style-type Property</title> <style> .geek1 { list-style-type: disc; } </style></head><body> <h1 style="text-align: center; color: green"> list-style-type: disc; </h1> <p>Sorting Algorithms</p> <ul class="geek1"> <li>Bubble Sort </li> <li>Merge Sort</li> <li>Insertion Sort</li> </ul></body></html>Output: 
Example: In this example, we are using list-style-type: circle; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: circle;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: circle;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
<html> <head> <title>CSS list-style-type Property</title> <style> .geek1 { list-style-type: circle; } </style></head><body> <h1 style="text-align: center; color: green"> list-style-type: circle; </h1> <p>Sorting Algorithms</p> <ul class="geek1"> <li>Bubble Sort </li> <li>Merge Sort</li> <li>Insertion Sort</li> </ul></body> </html>Output: 
Example: In this example, we are using list-style-type: square; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: square;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: square;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
<html><head> <title>CSS list-style-type Property</title> <style> .geek1 { list-style-type: square; } </style></head><body> <h1 style="text-align: center; color: green"> list-style-type: square; </h1> <p>Sorting Algorithms</p> <ul class="geek1"> <li>Bubble Sort </li> <li>Merge Sort</li> <li>Insertion Sort</li> </ul></body></html>Output:
Example: In this example, we are using list-style-type: decimal; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: decimal;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: decimal;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
<html> <head> <title>CSS list-style-type Property</title> <style> .geek1 { list-style-type: decimal; } </style></head><body> <h1 style="text-align: center; color: green"> list-style-type: decimal; </h1> <p>Sorting Algorithms</p> <ul class="geek1"> <li>Bubble Sort </li> <li>Merge Sort</li> <li>Insertion Sort</li> </ul></body> </html>Output:
Example: In this example, we are using list-style-type: lower-roman; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: lower-roman;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
<html> <head> <title>CSS list-style-type Property</title> <style> .geek1 { list-style-type: lower-roman; } </style></head><body> <h1 style="text-align: center; color: green"> list-style-type: lower-roman; </h1> <p>Sorting Algorithms</p> <ul class="geek1"> <li>Bubble Sort </li> <li>Merge Sort</li> <li>Insertion Sort</li> </ul></body> </html>Output:
Example: In this example, we are using list-style-type: upper-roman; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: upper-roman;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
<html> <head> <title>CSS list-style-type Property</title> <style> .geek1 { list-style-type: upper-roman; } </style></head><body> <h1 style="text-align: center; color: green"> list-style-type: upper-roman; </h1> <p>Sorting Algorithms</p> <ul class="geek1"> <li>Bubble Sort </li> <li>Merge Sort</li> <li>Insertion Sort</li> </ul></body> </html>Output: 
Example: In this example, we are using list-style-type: lower-greek; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-greek;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: lower-greek;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
<html> <head> <title>CSS list-style-type Property</title> <style> .geek1 { list-style-type: lower-greek; } </style></head><body> <h1 style="text-align: center; color: green"> list-style-type: lower-greek; </h1> <p>Sorting Algorithms</p> <ul class="geek1"> <li>Bubble Sort </li> <li>Merge Sort</li> <li>Insertion Sort</li> </ul></body> </html>Output: 
Example: In this example, we are using list-style-type: lower-latin; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-latin;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: lower-latin;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
<html> <head> <title>CSS list-style-type Property</title> <style> .geek1 { list-style-type: lower-latin; } </style></head><body> <h1 style="text-align: center; color: green"> list-style-type: lower-latin; </h1> <p>Sorting Algorithms</p> <ul class="geek1"> <li>Bubble Sort </li> <li>Merge Sort</li> <li>Insertion Sort</li> </ul></body> </html>Output: 
Example: In this example, we are using list-style-type: upper-latin; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: upper-latin;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: upper-latin;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
<html> <head> <title>CSS list-style-type Property</title> <style> .geek1 { list-style-type: upper-latin; } </style></head><body> <h1 style="text-align: center; color: green"> list-style-type: upper-latin; </h1> <p>Sorting Algorithms</p> <ul class="geek1"> <li>Bubble Sort </li> <li>Merge Sort</li> <li>Insertion Sort</li> </ul></body> </html>Output:
Example: In this example, we are using list-style-type: none; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: none;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: none;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
<html> <head> <title>CSS list-style-type Property</title> <style> .geek1 { list-style-type: none; } </style></head><body> <h1 style="text-align: center; color: green"> list-style-type: none; </h1> <p>Sorting Algorithms</p> <ul class="geek1"> <li>Bubble Sort </li> <li>Merge Sort</li> <li>Insertion Sort</li> </ul></body> </html>Output: 
Note: lower-alpha and upper-alpha are the same as lower-latin and upper-latin respectively.
Supported Browsers: The browser supported by list-style-type property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Firefox 1.0
- Opera 3.5
- Apple Safari 1.0
Article Tags :
