Styling lists with CSS

If you have no experience using HTML lists, we recommend you check out this page first.

HTML lists are very powerful. They allow us to display our content in an organised fashion. They also lay out a certain structure, which can be manipulated by CSS to produce amazing results.

Were going to look at some of the techniques available to manipulate HTML lists.

CSS Code

Unordered lists

As we know, by default unordered lists are displayed with a black bullet point.

There are a number of options available to alter this default appearance . Check out your options below:

Just to make things clear, this is an example of how the full CSS rule would look if we gave our list an ID of 'List1':

#list1 {
list-style-type: disc;
color:red/blue;
}

We can then style this list further by using the color property as seen above. Note that the color property changes the bullet point color as well as the font.

Ordered lists

Now, onto the ordered list. The ordered list actually gives us a few more options for altering the appearance. Lets look at a couple of these:

The values which are displayed above, are in our opinion, the most commonly used and also the most useful. However there are other options. These are listed below:

list-style-type:armenian;

list-style-type:decimal;

list-style-type:georgian;

list-style-type:lower-alpha;

list-style-type:upper-latin;

I think that's most of them covered! Why not give them a try, its good practise and may help you memorize the CSS

Things to remember

1. This is only just the beginning. With CSS we can manipulate lists into great navigation bars. For an example just take a look at the top of our page. Take a look at our CSS lists section to learn more.
2. We can actually use an image to style our lists further. To do this we use the following code: list-style-image:url('imgname.gif');