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. Bothul
elements have 3 different list items. - The first
ul
element has a class namesquare
and the secondul
element has a class namecircle
, 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 thelist-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; }