CSS Styling Lists Tutorial
Tags: css, writing, tutorial, beginners
Published: 2022-07-25 15:26:00

In this tutorial, we’ll learn how to style lists with CSS!

Remember that in HTML, we have two list types:

**Unordered lists** `<ul>` — list items are defined with bullet points:
- Coffee
- Tea
- Biscuits

**Ordered lists** `<ol>` — list items are defined with numbers (or letters i. ii. iii.):

1- Coffee
2- Tea
3- Biscuits

And each item is given the `<li>` tag, like so:
```html
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Biscuits</li>
</ol>
```
We use lists all the time when building on the web! It’s fair to say that most navigation menus are essentially HTML lists, which have been styled using CSS.

## How to style lists with CSS
CSS has several properties that we can use for styling. We can set different list item markers, use images as markers, as well as add colors & background colors.

Let’s take a look at the syntax!

### List-style-type
We use `list-style-type` to set a marker for our list:
```css
li {
  list-style-type: square;
}
```
There are in fact a whole lot of possible values! Such as `circle`, `square`, `decimal`, `upper-roman` and `none`. See all the [list style types](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type).

It’s worth mentioning that if you’re setting the color of the list marker — it’ll default to whatever the element color is.

Also, you’ll often use the `list-style-type:none` property to remove the markers completely!
### List-style-position
With list-style-position you can position the marker outside (default) or inside of the list content:
```css
li {
  list-style-position: outside;
}
li {
  list-style-position: inside;
}
```
When using `inside` with lists of text for example, each marker will be contained within the text box, thus indenting the first line of text for each list item.

### List-style-image
`list-style-image` can be used to place a custom image as a marker:
```css
li {
  list-style-image: url(goldstar.png);
}
```
The URL points to the location of the image.

It’s good practice to also set a `list-style-type` as a fallback, in case the image is unavailable.

### List-style (Shorthand)
The `list-style` shorthand property lets us specify our `list-style-type`, `list-style-position` & `list-style-image` in one declaration.

For example:
```css
ul {
 list-style: square inside url("goldstar.png");
}
```
This would be equivalent to:
```css
ul {
 list-style-type: square;
 list-style-position: inside;
 list-style-image: url(goldstar.png);
}
```
When using this shorthand property, be mindful of the order: `list-style-type`, then `list-style-position` and lastly `list-style-image`. If any of these properties are missing, they’ll revert to their default state.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)