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;
}
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!
Creating
software solutions
that work
