How to Remove List Styling Bullets in CSS
By default, the <ul> unordered list tag in HTML creates a list of elements preceded by a round bullet. In certain situations, you may want to remove the bullets altogether --- for example, if you want to keep the clean layout of the list without the distraction of the bullet, or if you're using the <ul> to generate a drop down menu. To accomplish this, use the "list-style-type" CSS style attribute, part of the CSS specifications since the first version.
Other People Are Reading
Instructions
-
-
1
Open the .html or .htm file that contains the unordered list whose bullets you want to remove. Use a plain text editor, like Notepad, to avoid introducing errors into the HTML code.
-
2
Scroll down to the code that begins the unordered list, which will be marked by a "<ul>" tag.
Add the following code after the "ul" and before the ">":
style="list-style-type: none;".
The code should now look like this:
"<ul style="list-style-type:none;">".
-
-
3
Save the HTML file, and close the text editor. Open the HTML file in your web browser to make sure that the bullets have been removed from the webpage.
-
1
Tips & Warnings
If you want to remove the bullets from all unordered lists on the page, you can add the following line of code between the "<head>" and "</head>" tags in the HTML source code: "<style type="text/css"> ul {list-style-type:none;} </style>".
References
- Photo Credit Comstock/Comstock/Getty Images
