How to get rid/remove of bullet pioints in CSS
We include a list of items on the web pages that were sometimes numbered and sometimes bulleted in various styles.
In HTML, there are two kinds of lists: ordered and unordered lists.
CSS list-style makes lists more visible or customizes them to meet web designs.
Applying the list style with CSS is advantageous since it allows you to organize and style data.
- The information is easy to understand; the data is easier to recall.
- Readers prefer short sentences over long blocks of text because they are more active.
When designing a navigation bar or any list with items that are neither numbered nor bulleted, we may find that we don't require numbers or bullets or no margin. We will need to use CSS styling to remove the spacing out of an unordered list (a list with bullets). Only the list will receive the style. So the selector would be ul or ol.
The ordered list is displayed <ol>tag and unordered list is displayed by <ul> tag.
First, let's see how we can use the ordered and unordered list with an example, and then we will learn how to remove the bullet points in CSS.
Example: -
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Unordered list Example</p>
<ul>
<li>C</li>
<li>C++</li>
<li>Python</li>
</ul>
<p>Ordered list Example</p>
<ol>
<li>C</li>
<li>C++</li>
<li>Python</li>
</ol>
</body>
</html>
Output: -
Using CSS, removing the listing bullet is not a difficult operation. In some circumstances, the bullet of unordered and ordered lists must be removed. Applying the CSS list-style or list-style-type property to none is a simple way to accomplish this.
The list-style-type CSS attribute determines the marker for the list item element.We can use this CSS property to make a list sans bullets. This can only be used on items with list-item as their display value. So because list-style-type property is transmitted, it can be given to all list items by setting it on the parent node (such as ul> or ol>).
The items in an ordered list are denoted with round bullets (•), and the elements in an unordered list are marked with Numerals (1, 2, 3, etc.). The list-style-type CSS property lets us modify the default list type of a marker to anything else, including squares, circles, roman numerals, Latin characters, and more.If its value is set to none, it will erase the markers/bullets. We can replace the bullet in a list with photos instead of eliminating them. It improves the site's visual appeal. The list-style-image attribute can be used to accomplish this.
Below we will see the example of removing the bullet points in CSS.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>
Example for removing the bullet points.
</title>
<style>
ul
{
list-style-type:none;
}
ol {
list-style-type: none;
}
</style>
</head>
<body>
<h2>The data mentioned below is listed but has no ordered or unordered property on it</h2>
<h3>List of some technologies using unordered list</h3>
<ul>
<li>Computer Networks</li>
<li>Cloud Computing</li>
<li>C++</li>
<li>Python</li>
<li>Node JS</li>
<li>Angular JS</li>
</ul>
<h3>List of some technologies using Ordered list</h3>
<ol>
<li>React Js</li>
<li>Linux</li>
<li>Docker</li>
<li>Terraform</li>
<li>Kubernetes</li>
<li>Jenkins</li>
</ol>
</body>
</html>
Output:-
In the above example, we have used ordered and unordered lists and have removed the bullet points by using the list-style-type property by setting it to none.