CSS Lists
This tutorial helps you learn how to format HTML lists using CSS.
Types of HTML Lists
The three different types of HTML lists are as follows:
- Unordered lists — It is the list of items in which every list item is marked with bullets.
- Ordered lists — It is the list of items in which each list item is marked with numbers.
- Definition list — It is the list of items with a description of each item.
You can refer to the HTML lists tutorial to learn more about the lists and how you can create them.
Styling Lists with CSS
The most commonly used ordered and unordered list can be styled and formatted using several properties provided by CSS. These CSS list properties usually let you to:
- Control the marker's shape or appearance.
- Specify an image instead of a bullet point or number for the marker.
- Specify the distance between the text and a marker in the list.
- Define whether the marker would appear inside or outside of the box that contains the list items.
The next section discusses the properties that you can use to style HTML lists.
Changing the Marker Type of Lists
Arabic numerals (1, 2, 3, 5, etc.) are used for numbering items in an ordered list by default. Round bullets (•) are used to mark the items in an unordered list.
But this default list marker type can be changed to any other type, like Latin letters, roman numerals, squares, circles, etc., using the list-style-type property.
Let's take the below-mentioned example to see how this property works:
Example :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Changing the Marker Type of Lists</h2>
<p>Example of unordered lists:</p>
<ul>
<li> BMW </li>
<li>Mercedes-Benz</li>
<li> Audi </li>
<li> Volvo </li>
<li> Ferrari </li>
</ul>
<p>Example of ordered lists:</p>
<ol>
<li> Tesla </li>
<li> Porsche </li>
<li> Lexus </li>
<li> Lamborghini </li>
<li> Land Rover </li>
</ol>
</body>
</html>Changing the Position of List Markers
Each list item's markers are positioned outside of its display box by default.
However, these markers or bullet points can be positioned inside of the display boxes of the list item using the list-style-position property along with the value inside. In it, the lines will be wrapped under the marker instead of being indented. Here's an example:
Let's look at the example below to understand how you can position markers or bullets.
<!DOCTYPE html>
<html>
<head>
<style>
ol.in li {
list-style-position: inside;
background-color:red;
}
ol.out li {
list-style-position: outside;
background-color:red;
}
</style>
</head>
<body>
<h2>Changing the Position of List Markers</h2>
<p>Example of ordered lists 1:</p>
<ol class="in">
<li> BMW </li>
<li>Mercedes-Benz</li>
<li> Audi </li>
<li> Volvo </li>
<li> Ferrari </li>
</ol>
<p>Example of ordered lists 2:</p>
<ol class="out">
<li> Tesla </li>
<li> Porsche </li>
<li> Lexus </li>
<li> Lamborghini </li>
<li> Land Rover </li>
</ol>
</body>
</html>
Using Images as List Markers
You can use the list-style-image property to set an image as a list marker.
In this example, the style rule assigns a transparent PNG image "arrow.png" as the list marker for every item in the unordered list. Let's take an example and see how it actually works:
<!DOCTYPE html>
<html>
<head>
<style>
ul li {
list-style-image: url("/assets/example-image/bullet-icon-circle.jpg");
}
</style>
</head>
<body>
<h2>Using Images as List Markers</h2>
<ul class="in">
<li> BMW </li>
<li>Mercedes-Benz</li>
<li> Audi </li>
<li> Volvo </li>
<li> Ferrari </li>
</ul>
Sometimes, the expected output might not be produced by the list-style-image property. Alternatively, the following solution can be used to control the image marker's positioning better.
Image bullets can also be set through the background-image CSS property as a workaround. Firstly, set the list to have no bullets. Next, define a non-repeating background image for the list element.
The following illustration displays the image markers equally in all browsers:
Example :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
}
ul li {
background-image: url("/assets/example-image/bullet-icon-circle.jpg");
background-position: 0px 5px; /* X-pos Y-pos (from top-left) */
background-repeat: no-repeat;
padding-left: 20px;
}
</style>
</head>
<body>
<h2>Using Images as List Markers</h2>
<ul class="in">
<li> BMW </li>
<li>Mercedes-Benz</li>
<li> Audi </li>
<li> Volvo </li>
<li> Ferrari </li>
</ul>
</body>
</html>Setting All List Properties At Once
It is a shorthand property to define all the three properties list-style-position, list-style-image, and list-style-type of a list in one place.
The below-mentioned style rule will set all the list properties in a single declaration.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("/assets/example-image/bullet-icon-circle.jpg");
}
</style>
</head>
<body>
<h2>Using Images as List Markers</h2>
<ul class="in">
<li> BMW </li>
<li>Mercedes-Benz</li>
<li> Audi </li>
<li> Volvo </li>
<li> Ferrari </li>
</ul>
</body>
</html>Note: When you use the list-style shorthand property, the orders of the values are: list-style-type | list-style-position | list-style-image. Therefore, it does not make a difference if any one of the above values is missing until the rest of the values are in the specified order.
Creating Navigation Menus Using Lists
HTML lists are often used for creating horizontal navigation bars or menus that generally appear at the top of a website. But as list items are block elements, we need to use the CSS display property to display them inline. So, let's take the following example to see how it works:
Example :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 10px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
</style>
</head>
<body>
<h2>Navigation Menus Using Lists</h2>
<ul class="in">
<li> <a href="https://www.bmw.com/en/index.html">BMW </a></li>
<li> <a href="https://www.mercedes-benz.com/en/">Mercedes-Benz </a></li>
<li> <a href="https://www.audi.in/in/web/en.html">Audi </a></li>
<li> <a href="https://www.volvocars.com/">Volvo </a></li>
<li> <a href="https://www.ferrari.com/">Ferrari </a></li>
</ul>
</body>
</html>