September 15, 2022

How to Change Unordered List Bullets in HTML and CSS

In this tutorial, we will learn how to change unordered list bullets in HTML and CSS. In an unordered list, the list items can be marked with bullets (discs), circles, squares, etc.

An unordered list is created using the ul element and each list item is wrapped with the li element. To change the bullets in the list, we can make use of CSS property list-style-type.

In the following example, we will demonstrate how we can change the default bullets to square and circle. Please have a look over the code example and the steps given below.

HTML

We have 2 ul elements in the HTML file. Both ul elements have 3 different list items.
The first ul element has a class name square and the second ul element has a class name circle, which we will use in the stylesheet to change the bullets in the unordered list.

In the head element, we have added a stylesheet style.css using the link element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unordered list</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <ul class="square">
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ul>
    <ul class="circle">
        <li>Tomato</li>
        <li>Potato</li>
        <li>Rice</li>
    </ul>

</body>

</html>

CSS

We are selecting the first list by using a square class name and changing bullets to square using the list-style-type property.

We are selecting the second list by using the circle class name and changing bullets to circle.

.square{
    list-style-type: square;
}
.circle{
    list-style-type: circle;
}

You May Also Like: