Updated June 8, 2023
Introduction to CSS Lists
HTML and CSS are the primary components of webpages. It can beautify and align unstructured data like paragraphs, structured data lists, and tables. HTML allows developers to create two types of lists, ordered and unordered. The primary difference between both lists is that the unordered list is represented with bullets, and the ordered list is represented with numbers.
CSS gives us good control over how the lists are re-rendered on the browser. With the help of it, we can control the list in the following ways:
- Set different indicators for the items in an ordered list.
- Set various indicators for the items in an unordered list.
- We can also set an image as a list item indicator with the help of CSS.
- We can add different backgrounds to the list and list items.
Different Types of Indicators in CSS Lists
With the help of the list-style-type CSS property, we can specify the exact type of list indicator we would like to use for a given list. It provides us with the following types of list indicators:
- list-style-type:circle;
- list-style-type:square;
- list-style-type:upper-roman;
- list-style-type:lower-alpha;
Some of the above indicators may apply to an ordered list and others to an unordered list.
Examples of CSS List
Let’s review them with the help of an example.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<style>
ul.one {
list-style-type : circle ; // defining list type circle
}
ul.two {
list-style-type : square ; // defining list type square
}
ol.three {
list-style-type : upper-roman ; // defining list type upper roman for order list
}
ol.four {
list-style-type : lower-alpha ; // defining list type lower case alpha for ordered list
}
</style>
</head>
<body>
<p> The world’s most popular programming languages in today’s era are : </p>
<ul class="one">
<li> Java : Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. </li>
<li> C : C is a popular language for cars, sensors and embedded systems. </li>
<li> Python : Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI. </li>
</ul>
<ul class="two">
<li> Java : Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. </li>
<li> C : C is a popular language for cars, sensors and embedded systems. </li>
<li> Python : Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI. </li>
</ul>
<p> The world’s most popular programming languages in today’s era are : </p>
<ol class="three">
<li> Java : Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. </li>
<li> C : C is a popular language for cars, sensors and embedded systems. </li>
<li> Python : Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI. </li>
</ol>
<ol class="four">
<li> Java : Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. </li>
<li> C : C is a popular language for cars, sensors and embedded systems. </li>
<li> Python : Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI. </li>
</ol>
</body>
</html>Output:
Example #2
With the help of the list-style-image property, we can also set an image as a list marker.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image : url('sqpurple.gif') ; //set an image to be used as the list indicator for unordered list
}
</style>
</head>
<body>
<ul>
<li> Java : Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications. </li>
<li> C : C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility. </li>
<li> Python : Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI. </li>
</ul>
</body>
</html>Output:
Conclusion
As shown above, data can be well presented and formatted with the help of HTML and CSS lists. We can represent data in ordered lists with the help of numbers and alphabets, or we can choose to use bullets instead. We can also control various aspects of lists, like list markers, font colors, and background colors.
Recommended Articles
We hope that this EDUCBA information on “CSS Lists” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
