{

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 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 also applies to the li tag also.

There are 4 ways we can do 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.

using 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 ul tag.

In this example, we will write a class selector.

Here is an css class selector

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

In HTML code, You can apply the selector using the class attribute of 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 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.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.