CSS Bullet Style [Explained]
Tags: css, lists
Published: 2018-04-19 08:49:03

---
title: CSS Bullet Style [Explained]
published: true
description: A brief but thorough explanation of the bullet styling for unordered lists in CSS.
tags: CSS, lists.
---
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. I am 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 case of unordered lists, no numeration is present**, that is why a common name for this type of lists is **bulleted lists**.

When using lists, it is important to [format the text](https://kolosek.com/css-line-height/) 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](https://kolosek.com/css-relative-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, you can change multiple properties at the same time. But I’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

You 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](https://kolosek.com/content/images/2018/02/list_position_outside.png)


![list_position_inside](https://kolosek.com/content/images/2018/02/list_position_inside.png)

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](https://kolosek.com/10-ways-to-improve-your-website-design/).

If this type of styling isn't enough, you can [change the color](https://www.w3.org/Style/Examples/007/color-bullets.en.html) of the bullets.

## Combining the Properties

As I’ve 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.

This article is originally published on [Kolosek Blog](https://kolosek.com/css-bullet-style/).