Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Bullet Style

DZone's Guide to

CSS Bullet Style

In this article, we'll be talking about unordered lists, the development of which is rather inevitable when making modern websites and apps.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Are you a fan of making lots and lots of lists? Neither am I. But, here we are not talking about chore 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, which is why a common name for these types of lists 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

The 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.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,css ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}