CSS Bullet Style

CSS Bullet Style

Are you a fan of making lots and lots of lists? Neither am I. But, here we are not talking about chores or shopping lists. We are talking about ordered and unordered lists that are inevitable when making modern websites and apps.

As mentioned, when creating lists in HTML and CSS, there are two types: ordered and unordered. In the case of ordered lists, numeration is present. On the other hand, in the case of unordered lists, no numeration is present, that is why a common name for this type of list is bulleted lists.

When using lists, it is important to format the text properly.

The focus of this article will be on unordered lists and the types and properties of bullets.

The unordered list uses the <ul></ul> tag. Let’s see a simple example.

HTML

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
<ul>

The Type Attribute

The type attribute can be used to determine which type of bullet will be used on the list. This attribute can consist of three different values:

  • Circle,
  • Disc,
  • Square.

Bullet type can be set on either the <ul></ul> or <li></li> element, which means you can set the style on the overall list, or style each list item individually.

A good thing to know is which font size to use when making lists.

Bullet Style

For changing the bullet style, two properties can be used. The list-style-type property or the list-style. The difference is by using the second one, we can change multiple properties at the same time. But we’ll get to that later.

CSS

.ul {
  list-style-type: square;
}

Here we see the list style set to square.

Using a Custom Image

With the power of CSS, it is possible to use a custom image as a bullet. Usually, it is a simple small icon. For this purpose, we are using list-style-image.

CSS

ul {
  list-style-image: url(‘images/sample-bullet.png’);
}

Bullet Position

We can also set the position of the bullets by using the list-style-position property. It can have two values: outside and inside.

CSS

ul {
  list-style-position: outside;
}

CSS

ul {
  list-style-position: inside;
}

list_position_outside

list_position_inside

The first image shows the value set to outside, and the second one has the value set to inside.
When setting the value to outside it means the bullet will be outside the list item. And, when setting the value to inside, the bullet will be inside the list item.

Don't forget to give the lists some styling.

If this type of styling isn't enough, you can change the color of the bullets.

Combining the Properties

As we mentioned before, you can combine multiple properties by setting list-style.

CSS

ul {
  list-style: square inside url("element.gif");
}

With this shorthand, we are simultaneously setting list-style-type, list-style-position and list-style-image.

Summary

Lists are used very often when developing websites and apps, so you should always know how to style them. I hope this brief explanation will help in your projects.

Thank you for reading and be sure to subscribe to our newsletter!