How to style ordered list without bullets in CSS


In CSS, There is Unordered list which 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
  • USA
  • Germany As you seen an output contains bullet points

We can remove bullet points using css styles

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

using inline styles with ul tag in html

CSS has list-style and list-style-type attribute for 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 style attribute.

This tag can be applied to 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 removes an bullet from an 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 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 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 an shorthand property that changes three properties like list-style-type, list-style-position and list-style-image values in a single property of an 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 this values to all above three properties in a single line of code and improves 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 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.