Lists

One element that receives a lot of default styling is the list. Without doing anything, browsers will add bullets in front of items and shift them a bit to the right.

This chapter explains the CSS properties that make this possible. Once done, you know how to disable or change this default look for lists.

Now you might think: why would I want to? I don’t even use that many lists!

I want to remind you of “semantic” HTML. The meaning of a list is to group or enumerate related items. As such, a list element shouldn’t only be used within articles. It should also be used for a header that lists different pages on the website you can visit. It should also be used for a comment section that lists the comments in order.

When you write HTML like that, this default styling gets in the way. You don’t want bullet points in front of every link in your header!

That’s why this chapter is important and it comes relatively early in the course. (I know we’re 20 chapters into this course, that’s why I said relatively.)

List Style Type

To change what’s displayed in front of list items, use the list-style-type property.

It supports a load of named values. Below is a list of the most common ones.

• disc ( = the default “bullet”)
• circle ( = an open bullet)
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha

It also supports any string, such as "-". Most importantly, set it to none to turn it off.

Symbols & Images

If you want total control, you can set the list style to any image using the list-style-image property. (With, as expected, a url to a valid image as the value.)

If you want different bullets per item, use the symbols(sym1 sym2 ...) value. You can provide any number of symbols (separated by space) and it will use those.

Beware! At time of writing (late 2023), this value isn’t supported everywhere yet! Try it in Firefox, for now.

List Style Position

The default behavior is to place these bullets outside the list item’s “box”. If you want to move it inside the element, use the list-style-position property. It allows two values: outside or inside.

Removing the Defaults

Besides this, lists automatically add margin and padding to shift the list items to the right. These are set on the <ul> (or <ol>) element, not the <li> ( = the list items themselves).

As such, to fully disable the default list styling, use the following.

In Practice: Header

Now, let’s see if we can make a header for a website.

We want to use a proper HTML structure, which means we use a list (inside a nav tag).

But it obviously shouldn’t look like a list! So we need to style it a little differently.

Below is one approach.