W3docs
it
Accedi

css · CSS Basics

How can you make a list not display bullets?

Answers

  • list-style-type: no-bullet
  • list-style-type: none
  • list: none
  • list-style-type: nobullet
# Understanding the list-style-type: none Property in CSS CSS, or Cascading Style Sheets, provides several methods to style HTML elements, and that includes styling lists. By default, an HTML list will display bullets (for unordered lists) or numbers (for ordered lists) beside each list item. However, there might be a scenario where you'd like to remove these markers to meet your design requirements. The correct approach to remove these bullets or numbers is through the use of the CSS `list-style-type` property. The `list-style-type` property defines the type of list item marker in a list. If you want to remove the list item markers, you can set the `list-style-type` property to `none`. ```css ul { list-style-type: none; } ``` In the CSS code snippet above, the `ul` selector targets all unordered lists (`
    `) in the document. The `list-style-type: none` inside the curly braces is a declaration that sets the type of list item marker to none, effectively removing the default bullets. It's worth noting that `list-style-type: none` doesn't only apply to `
      ` but to `
        ` (ordered list) as well. If applied to an ordered list, It would remove the default numbering. As a best practice, it's always best to keep the design consistent across your web pages. If you decided to remove list markers in one section of your site, it would make sense to remove them in all other sections for optimal user experience. Please note that options such as `list-style-type: no-bullet`, `list: none` or `list-style-type: nobullet` are incorrect as they are not valid CSS declarations. Always refer to the official CSS documentation to ensure you're using valid properties and values.