How to style ordered list without bullets in CSS

How to style ordered list without bullets in CSS

In CSS, There is an Unordered list that is used to display the list of items in

We can create a list using the ul tag with li child elements

<html>
  <body>
    <h2>UL html styles example</h2>

    <ul>
      <li>India</li>
      <li>USA</li>
      <li>Germany</li>
    </ul>
  </body>
</html>

Output

  • India
  • the USA
  • Germany As you have seen an output contains bullet points

We can remove bullet points using CSS styles.

Let’s see different ways to style an unordered list without bullets.

using inline styles with ul tag in HTML

CSS has a list-style and list-style-type attribute for the ul tag which is changed to none to make list without bullet points.

You can make change the styles using inline styles in HTML using the style attribute.

This tag applies to the li tag also.

There are 4 ways we can do this using inline styles.

One way

<html>
  <body>
    <h2>UL tag html styles example</h2>

    <ul style="list-style: none;">
      <li>India</li>
      <li>USA</li>
      <li>Germany</li>
    </ul>
  </body>
</html>

Or second way

<ul style="list-style-type: none;"></ul>

or third way

<li style="list-style-type: none"></li>

or fourth way

<li style="list-style: none"></li>

All the above four examples remove a bullet from a list of items.

Use CSS selector to remove bullet points for unordered list

We can write a CSS selector using id or class or element selector or any valid CSS selector for the ul tag.

In this example, we will write a class selector.

Here is a css class selector

orderstyles {
  list-style: none;
  //list-style-type: none;
}

In HTML code, You can apply the selector using the class attribute of the ul or li tag.

<ul class="orderstyles"></ul>

or
<li class="orderstyles"></li>

What’s the difference between list-style-type and list-style?

In the above examples, we can apply ul or li styles with list-style or list-style-type.

list-type is a shorthand property that changes three properties like list-style-type, list-style-position, and list-style-image values in a single property of a UL/LI tag.

So when you change list-type:none, and equals to the below lines of code

list-style-type: none;
list-style-position: none;
list-style-image: none;

list-style property possible values are square, inside, url image, and none.

You can change these values to all the above three properties in a single line of code and improve code less in CSS styles.

Declaring with square value

list-style: square;

is equal to

list-style-type: square;
list-style-position: outside;
list-style-image: none;

some times you want to configure custom images, you can use the below configuration styles to apply and use three properties.

list-style: circle outside url(image.png);

which is equal to

ul {
  list-style-type: circle;
  list-style-position: outside;
  list-style-image: url(image.png);
}

list-type accepts three values and by default, it accepts one value.

Conclusion

You learned unordered list styles by removing bullet points using list-style and list-style-type CSS properties.

And also learned the difference between list-style and list-style-type with examples.