Types of CSS Lists: A Comprehensive Guide to Use them
Table of Contents
Types of CSS Lists
There are several types of CSS lists that you can create and customize using CSS properties. These are some of the commonly used CSS lists.
You can apply various CSS properties to style and customize the appearance of lists to match your design requirements.
Here are the main types of CSS lists:
Lowercase Alphabetical CSS List Marker:
The list-style-type property with the value lower-alpha is used to display lowercase alphabetical letters as markers for an ordered list.
Unordered CSS List (<ul>):
An unordered list is created using the <ul> element. By default, it displays a bullet point marker before each list item.
Here’s a complete HTML code example that demonstrates the use of an unordered list (<ul>) with default bullet point markers:
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h1>My Unordered List Example</h1>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
Explanation:
In this example, we have an <ul> element that contains three list items (<li>). By default, the browser will display bullet point markers before each list item.
When you open this HTML file in a web browser, you will see the unordered list displayed as follows:
Each list item will have a bullet point marker preceding the text.
CSS Ordered List (<ol>):
An ordered list is created using the <ol> element.
By default, it displays a numerical or alphabetical marker before each list item.
Here’s a complete HTML code example that demonstrates the use of an ordered list (<ol>) with default numerical markers:
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<h1>My Ordered List Example</h1>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</body>
</html>
In this example, we have an <ol> element that contains three list items (<li>). By default, the browser will display numerical markers before each list item.
When you open this HTML file in a web browser, you will see the ordered list displayed as follows:
Each list item will have a numerical marker preceding the text.
Custom CSS Marker List:
You can use the list-style-image property to define a custom image as the marker for list items instead of the default markers like bullets or numbers.
Here’s a complete HTML code example that demonstrates the use of a custom marker list using the list-style-image property:
<!DOCTYPE html>
<html>
<head>
<title>Custom Marker List Example</title>
<style>
ul {
list-style-type: none;
}
ul li {
list-style-image: url('path/to/custom-marker.png');
padding-left: 20px;
}
</style>
</head>
<body>
<h1>My Custom Marker List Example</h1>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
Explanation:
1-In this example, we use CSS to create a custom marker list.
2-The list-style-type property is set to none to remove the default bullet point marker for list items within the <ul> element.
2-Then, the list-style-image property is applied to each individual list item (<li>) to set a custom image as the marker.
3-Replace ‘path/to/custom-marker.png’ with the actual path to your custom marker image.
4-Additionally, the padding-left property is used to provide some spacing between the custom marker and the text of each list item.
When you open this HTML file in a web browser, you will see the list items displayed with the custom image marker you provided.
Note: Make sure the custom marker image is appropriately sized and has a transparent background to ensure it displays correctly as the list item marker. Adjust the path and filename in the CSS code according to the location of your custom marker image.
Disc CSS List Marker:
The list-style-type property with the value disc is used to display filled circles as markers for an unordered list.
Here’s a complete HTML code example that demonstrates the use of a disc list marker for an unordered list (<ul>) using the list-style-type property:
<!DOCTYPE html>
<html>
<head>
<title>Disc List Marker Example</title>
<style>
ul {
list-style-type: disc;
}
</style>
</head>
<body>
<h1>My Disc List Marker Example</h1>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
Explanation:
1-In this example, the CSS code within the <style> tags sets the list-style-type property of the <ul> element to disc.
2-This will display filled circles as markers for each list item.
When you open this HTML file in a web browser, you will see the unordered list displayed as follows:
Each list item will have a filled circle marker preceding the text.
CSS Circle List Marker:
The list-style-type property with the value circle is used to display hollow circles as markers for an unordered list.
Here’s a complete HTML code example that demonstrates the use of a circle list marker for an unordered list (<ul>) using the list-style-type property:
<!DOCTYPE html>
<html>
<head>
<title>Circle List Marker Example</title>
<style>
ul {
list-style-type: circle;
}
</style>
</head>
<body>
<h1>My Circle List Marker Example</h1>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
Explanation:
1-In this example, the CSS code within the <style> tags sets the list-style-type property of the <ul> element to circle.
2-This will display hollow circles as markers for each list item.
When you open this HTML file in a web browser, you will see the unordered list displayed as follows:
Each list item will have a hollow circle marker preceding the text.
CSS Square List Marker:
The list-style-type property with the value square is used to display squares as markers for an unordered list.
Here’s a complete HTML code example that demonstrates the use of a square list marker for an unordered list (<ul>) using the list-style-type property:
<!DOCTYPE html>
<html>
<head>
<title>Square List Marker Example</title>
<style>
ul {
list-style-type: square;
}
</style>
</head>
<body>
<h1>My Square List Marker Example</h1>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
Explanation:
1-In this example, the CSS code within the <style> tags sets the list-style-type property of the <ul> element to square.
2-This will display squares as markers for each list item.
When you open this HTML file in a web browser, you will see the unordered list displayed as follows:
Each list item will have a square marker preceding the text.
CSS Decimal List Marker:
The list-style-type property with the value decimal is used to display decimal numbers as markers for an ordered list.
Here’s a complete HTML code example that demonstrates the use of a decimal list marker for an ordered list (<ol>) using the list-style-type property:
<!DOCTYPE html>
<html>
<head>
<title>Decimal List Marker Example</title>
<style>
ol {
list-style-type: decimal;
}
</style>
</head>
<body>
<h1>My Decimal List Marker Example</h1>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</body>
</html>
Explanation:
1-In this example, the CSS code within the <style> tags sets the list-style-type property of the <ol> element to decimal.
2-This will display decimal numbers as markers for each list item.
When you open this HTML file in a web browser, you will see the ordered list displayed as follows:
Each list item will have a decimal number marker preceding the text.
CSS Decimal-leading-zero List Marker:
The list-style-type property with the value decimal-leading-zero is used to display decimal numbers with leading zeros as markers for an ordered list.
Decimal-leading-zero List Marker: complete code in html
Here’s a complete HTML code example that demonstrates the use of a decimal-leading-zero list marker for an ordered list (<ol>) using the list-style-type property:
<!DOCTYPE html>
<html>
<head>
<title>Decimal-leading-zero List Marker Example</title>
<style>
ol {
list-style-type: decimal-leading-zero;
}
</style>
</head>
<body>
<h1>My Decimal-leading-zero List Marker Example</h1>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</body>
</html>
Explanation:
1-In this example, the CSS code within the <style> tags sets the list-style-type property of the <ol> element to decimal-leading-zero.
2-This will display decimal numbers with leading zeros as markers for each list item.
When you open this HTML file in a web browser, you will see the ordered list displayed as follows:
Each list item will have a decimal number with a leading zero marker preceding the text.
CSS Lowercase Roman List Marker:
The list-style-type property with the value lower-roman is used to display lowercase Roman numerals as markers for an ordered list.
Here’s a complete HTML code example that demonstrates the use of a lowercase Roman list marker for an ordered list (<ol>) using the list-style-type property:
<!DOCTYPE html>
<html>
<head>
<title>Lowercase Roman List Marker Example</title>
<style>
ol {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<h1>My Lowercase Roman List Marker Example</h1>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</body>
</html>
Explanation:
1-In this example, the CSS code within the <style> tags sets the list-style-type property of the <ol> element to lower-roman.
2-This will display lowercase Roman numerals as markers for each list item.
When you open this HTML file in a web browser, you will see the ordered list displayed as follows:
Each list item will have a lowercase Roman numeral marker preceding the text.
CSS Uppercase Roman List Marker:
The list-style-type property with the value upper-roman is used to display uppercase Roman numerals as markers for an ordered list.
Here’s a complete HTML code example that demonstrates the use of an uppercase Roman list marker for an ordered list (<ol>) using the list-style-type property:
<!DOCTYPE html>
<html>
<head>
<title>Uppercase Roman List Marker Example</title>
<style>
ol {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h1>My Uppercase Roman List Marker Example</h1>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</body>
</html>
Explanation:
1-In this example, the CSS code within the <style> tags sets the list-style-type property of the <ol> element to upper-roman.
2-This will display uppercase Roman numerals as markers for each list item.
When you open this HTML file in a web browser, you will see the ordered list displayed as follows:
Each list item will have an uppercase Roman numeral marker preceding the text.
CSS Uppercase Alphabetical List Marker:
The list-style-type property with the value upper-alpha is used to display uppercase alphabetical letters as markers for an ordered list.
Here’s a complete HTML code example that demonstrates the use of an uppercase alphabetical list marker for an ordered list (<ol>) using the list-style-type property:
<!DOCTYPE html>
<html>
<head>
<title>Uppercase Alphabetical List Marker Example</title>
<style>
ol {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<h1>My Uppercase Alphabetical List Marker Example</h1>
<ol>
<li>List item A</li>
<li>List item B</li>
<li>List item C</li>
</ol>
</body>
</html>
Explanation:
1-In this example, the CSS code within the <style> tags sets the list-style-type property of the <ol> element to upper-alpha.
2-This will display uppercase alphabetical letters as markers for each list item.
When you open this HTML file in a web browser, you will see the ordered list displayed as follows:
Each list item will have an uppercase alphabetical letter marker preceding the text.
An Image as The List Item Marker:
Here’s a complete HTML code example that demonstrates the use of an image as the marker for list items:
<!DOCTYPE html>
<html>
<head>
<title>Image as List Item Marker Example</title>
<style>
ul {
list-style-type: none;
}
ul li {
list-style-image: url('path/to/custom-marker.png');
padding-left: 20px;
}
</style>
</head>
<body>
<h1>My Image as List Item Marker Example</h1>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
Explanation:
1-In this example, we use CSS to display an image as the marker for list items. 2-The list-style-type property is set to none for the <ul> element to remove the default bullet point marker.
3-Then, the list-style-image property is applied to each individual list item (<li>) to set a custom image as the marker.
4-Replace ‘path/to/custom-marker.png’ with the actual path to your custom marker image.
5-Additionally, the padding-left property is used to provide some spacing between the custom marker and the text of each list item.
When you open this HTML file in a web browser, you will see the list items displayed with the custom image marker you provided.
Note: Make sure the custom marker image is appropriately sized and has a transparent background to ensure it displays correctly as the list item marker. Adjust the path and filename in the CSS code according to the location of your custom marker image.
References
CSS Lists Module Level 3 (W3C Recommendation):