Styling of HTML Lists with CSS

This Tutorial shows how to Style HTML Lists with CSS, and how to make them look the same in all browsers.

Edited: 2011-07-24 18:51

Something which many beginners find hard, is how to style HTML Lists using CSS. This Tutorial will teach you about the properties used to change the appearance of your lists, or even how to apply your own bullet images.

Removing the Markers

A common design goal when dealing with navigation, is to completely remove the bullets or Markers of the list item, as well as the margin/padding of the lists. This is fairly easily done by the use of the margin and padding properties of CSS.

While Internet Explore uses margin, mozila used padding, so to get them to render the same way in each browser, we need to remove both. Finally we set the list-style-type to none, this is the property which controls the type of bullet used on the list.

ol {
margin: 0;
padding: 0;
list-style-type: none;
}

Normally i would just remove the margin and padding on all elements in top of my stylesheet, since i likely need to change them anyway, and since i dislike having to repeat the same declarations on several elements. Removing the margin and padding on all elements is easy, simply use the below rule.

* {
margin: 0;
padding: 0;
}

Styling of Markers

At times the designer may want to keep the markers, but change the type of marker which is used. It is also possible to use a custom image. But lets start by using roman digits instead of the normal disc.

Changing the list-Marker Style

To do this, we first need to either apply a left-margin or left-padding of 1em to the list, but remember to remove the opposite of what you use. This would ensure a good cross-browser compatibility, example below.

Now that we removed the margin and padding, in our first example. We simply need to set the left padding, like done below.

Styling nested Lists

You can easily style your nested lists, by using a child selector.

ol li ol {
/* Your Styles Here */
}

Above would apply to an Ordered list, inside a list item of an Ordered list. To avoid the creation of a "empty line" before the nested list, each containing li element will need to have its display property set to block. This is best done by applying a class to each containing list item.