Home »
CSS
How to create an unordered list without bullets using CSS?
In this tutorial, we will learn how to create an unordered list without bullets using CSS with the help of an example?
By Apurva Mathur Last updated : July 24, 2023
Unordered list (ul)
As the name suggests unordered list is a list that does not have any order/sequence. The syntax of the unordered list is the same as we define an ordered list. The only difference is that for the unordered list we use the <ul> tag and all the items we want in our list are written inside this tag.
Example of Unordered list (ul)
Let us see a simple code for an unordered list:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>Jim</li>
<li>kim</li>
<li>Kiara</li>
<li>Rohan</li>
<li>Rehan</li>
<li>John</li>
<li>Ziyaa</li>
</ul>
</body>
</html>
Output:
By default, an unordered list will display with bullets but what if we don't want bullets with our unordered list what to do in that case?
How to create an unordered list without bullets using CSS?
CSS provides us a property known as list-style-type this property has several values, one of the values is none. If we don't want bullets in the list we can use this property with none value and bullet-style won't appear.
Syntax
list-style-type : none;
Example
Let us see the same code after applying this property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
ul {
list-style-type: none;
font-size: 30px;
font-weight: bold;
}
</style>
<body>
<ul>
<li>Jim</li>
<li>kim</li>
<li>Kiara</li>
<li>Rohan</li>
<li>Rehan</li>
<li>John</li>
<li>Ziyaa</li>
</ul>
</body>
</html>
Output:
CSS Examples »