HTML Lists and CSS List Properties
Firstly if we discuss about HTML list, there are two different types of HTML list, which is given below:
- Unordered lists (<ul>) — These types of list objects are shown with bullets (•).
- Ordered lists (<ol>) — These types of list objects are shown with numbers (1, 2, 3, 5, and so on).
There is a number of CSS list properties, which are applied to HTML lists. The CSS list properties are given below:
- list-style-type
- list-style-position
- list-style-image
- list-style
- marker-offset
list-style-type
Let’s see the given example to understand how list-style-type works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul.test {
list-style-type: circle;
}
ol.test1 {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h4>Example of unordered lists:</h4>
<ul class="test">
<li>Name</li>
<li>Email</li>
<li>Phone</li>
</ul>
<h4>Example of ordered lists:</h4>
<ol class="test1">
<li>Name</li>
<li>Email</li>
<li>Phone</li>
</ol>
</body>
</html>
Output
Example of unordered lists:
- Name
- Phone
Example of ordered lists:
- Name
- Phone
list-style-position
The list-style-position CSS property shows that where the marker should display inside or outside of the border containing the bullet points. The by default position of the list is outside.
Let’s see the given example to understand how list-style-position works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul.test {
list-style-position: outside;
}
ul.test1 {
list-style-position: inside;
}
</style>
</head>
<body>
<h4>Example of unordered lists:</h4>
<ul class="test">
<li>Name</li>
<li>Email</li>
<li>Phone</li>
</ul>
<h4>Example of ordered lists:</h4>
<ul class="test1">
<li>Name</li>
<li>Email</li>
<li>Phone</li>
</ul>
</body>
</html>
Output
Display bullet point in default position:
- Name
- Phone
Display bullet point in inside position:
- Name
- Phone