How to Remove Default List Style from Unordered List in CSS ?
Last Updated :
12 Mar, 2024
Unordered lists in HTML are typically styled with bullet points by default. However, there may be instances where you want to remove this default styling for a cleaner look or to apply custom styles. In this article, we will explore various methods to remove the default list styling for an unordered list using CSS.
Remove Default List Styles from Unordered List using list-style-type Property
The simplest way to remove the default bullet points is by setting the list-style-type property to none in your CSS.
HTML<!DOCTYPE html>
<html>
<head>
<title>
Remove Default List Style for
an Unordered List
</title>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<p>Unordered List Items</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Output
In this example, the list-style-type: none; rule removes the bullet points from all unordered lists (<ul>) in the document.
Remove Default List Style from Unordered List using list-style Shorthand Property
You can also use the list-style shorthand property to remove the list styling. This property allows you to set multiple list-related properties at once, including list-style-type, list-style-position, and list-style-image.
HTML<!DOCTYPE html>
<html>
<head>
<title>
Remove Default List Style for
an Unordered List
</title>
<style>
ul {
list-style: none;
}
</style>
</head>
<body>
<p>Unordered List Items</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Output
Here, list-style: none; achieves the same effect as list-style-type: none;, removing the default bullet points.
Removing Default List Styles (List Padding and Margin)
In addition to removing the bullet points, you might also want to remove any default padding and margin that is applied to the list and list items.
HTML<!DOCTYPE html>
<html>
<head>
<title>
Remove Default List Style for
an Unordered List
</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin: 0;
}
</style>
</head>
<body>
<p>Unordered List Items</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Output
In this example, setting padding: 0; and margin: 0; for both the unordered list (<ul>) and list items (<li>) removes any default spacing, resulting in a list with no bullet points and no additional padding or margin.
Share your thoughts in the comments
Please Login to comment...