How to Remove Default List Style from Unordered List in CSS ? Last Updated : 12 Mar, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. Table of Content Using the list-style-type PropertyUsing the list-style Shorthand PropertyRemoving List Padding and MarginRemove Default List Styles from Unordered List using list-style-type PropertyThe 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 PropertyYou 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. Comment More infoAdvertise with us Next Article How to remove the default arrow icon from a dropdown list? G gudiya25wszx Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Remove Indentation from an Unordered List Item using CSS? Removing indentation from an unordered list in web design involves eliminating the default left spacing applied by browsers. This can be achieved using CSS properties, allowing the list items to align flush with other content for a cleaner layout.Unordered List ItemAn unordered list item is a list e 2 min read How to remove the default arrow icon from a dropdown list? Removing the default arrow icon from a dropdown list (<select> element) means hiding the built-in down-facing arrow provided by the browser. This allows for custom styling of the dropdown, giving developers control over its appearance using custom icons or designs.Here we have some common appr 2 min read How to Remove Bullets from an Unordered List using Bootstrap 5 ? In this article, we will see how we can remove those "Bullets" from an Unordered list using Bootstrap 5. An Unordered list in HTML is a type of list in which the order of the items does not matter and hence, instead of marking each item with a number (as in an ordered list), "bullets" are used to ma 2 min read How to resize list style image in CSS ? In this article, we will learn to set an image or icon as the <li> image. We need to set the size of the custom list image to make it attractive. So, we will also learn the different ways to resize the custom list image. Syntax: In this article, we will use below CSS properties. background-ima 3 min read How to Create an Unordered List in HTML ? An unordered list in HTML is a collection of items displayed with bullet points. To create an unordered list, we can use the <ul> tag to start the list and <li> tags for each items. Unordered lists are usually displayed with bullet points. Syntax<ul> <li>apple</li> < 1 min read How to create an unordered list with square bullets in HTML ? We will learn how to create an unordered list with square bullets using HTML and CSS. This simple yet essential technique enhances the visual appeal of your web pages. We will use the CSS list-style-type: square property to achieve this effect. The list-style-type property in CSS specifies the appea 2 min read Like