CSS list-style-type Property
Last Updated :
17 Apr, 2024
The list-style-type property is your go-to tool for customizing the look of list item markers. Whether you’re aiming for a traditional disc marker or a unique character, or even a custom counter style, list-style-type has got you covered. This comes into play especially when the list-style-image property is set to ‘none’, allowing list-style-type to take the center stage in styling your lists.
Syntax:
list-style-type: disc|circle|square|decimal|lower-roman|upper-roman|
lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|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.
html
<!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>
Output:Â 
Example: In this example, we are using list-style-type: circle; Â property.
html
<!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>
Output:Â 
Example: In this example, we are using list-style-type: square; Â property.
html
<!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>
Output:Â
Example: In this example, we are using list-style-type: decimal; property.
html
<!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>
Output:Â
Example: In this example, we are using list-style-type: lower-roman; property.
html
<!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>
Output:Â
Example: In this example, we are using list-style-type: upper-roman; property.
html
<!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>
Output:Â 
Example: In this example, we are using list-style-type: lower-greek; property.
html
<!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>
Output:Â 
Example:Â In this example, we are using list-style-type: lower-latin; property.
html
<!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>
Output:Â 
Example: In this example, we are using list-style-type: upper-latin; property.
html
<!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>
Output:Â
Example: In this example, we are using list-style-type: none; property.
html
<!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>
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...