How to create an Unordered List without using Bullets using CSS in HTML?

Here, we are going to learn how to create an Unordered List without using Bullets using CSS in HTML?
Submitted by Anjali Singh, on December 10, 2019

Trivia:

We all want our elements inside the web page to be in a particular order as it helps in displaying the web page in a sorted and well-arranged manner. The convention is to choose from various types of lists. There are majorly three types of lists: Ordered List, Unordered List, and Description List. People would select from one of these types and would start creating a list for the elements that they want to display in an arranged form.

Problem:

Lists generally come with numbering, bullets and various other patterns to point in every element or a sentence depending on what is inside the list. But there are times when developers do not want their elements inside the list to be pointed out or anything. So what to do when someone does not want any bullet points for their list?

Solution:

Let us suppose that a developer is creating an unordered list but he or she does not want any bullet points for that particular list. The answer is surprisingly very simple as the only thing you gotta do is add list-style-type in your unordered list. Let us understand this solution step by step.

Step 1: First, an unordered list is created with the help of the <ul> tag. Here ul stands for unordered list.
Step 2: For the list items, we use <li> tag add li here means list items. These list items are generally marked with numbers, circles or discs. But the default is bullets, small black dots.
Step 3: We will use CSS property list-style-type for creating an unordered list but omitting bullets and to that, we will be using the style attribute. We know that the style attribute defines or specifies an inline style for a particular element.
Step 4: We will be using this attribute with the HTML <ul> tag along with the CSS property list-style-type to omit the bullets in our unordered list.

Note: It is known that the usage of style attribute overrides any usage of style which is set globally. Therefore, the style attribute would override any style which is specified in the HTML <style> tag or an external style sheet.

Value:

Now that we know we have to use list-style-type CSS property to create an unordered list without the bullets but what is the value of this property that will help in removing the bullets? So, the answer is that when you have entered list-style-type in your style attribute then you have to set the list-style-type to none. This means there should not be any style associated with the list items in the list.

Syntax:

Element {
    list-style-type: none;
}

Example:

<!DOCTYPE html>
<html>

<body>
    <h2>Unordered List without Bullets in CSS</h2>
    <ul style="list-style-type:none;">
        <li>student</li>
        <li>address</li>
        <li>branch</li>
    </ul>
</body>

</html>

Output

Creating Unordered listing using CSS | Example 1

In the above example, we have created an unordered list without using Bullets by assigning the value of list-style-type to none.

CSS Tutorial & Examples »

Styling Lists in CSS

Pseudo Classes | CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples