Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Articles & Tutorials

Styling Lists

by Jocelyn Kinnear

« Prev · 1 · 2 · 3 · Next »

Summary : You may have already read our article on 'Understanding and Using Lists', but how do you make them more pleasing to look at? This article will step you through the process of adding simple styles to your lists using CSS.

As a quick refresher, here is the basic skeleton of an unordered list:

<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>

Here is the resulting list:

  • List Item One
  • List Item Two
  • List Item Three

That's pretty boring to look at, isn't it? Thanks to CSS, there is a lot that we can do to jazz that list up a bit. For the sake of keeping it as simple as we can, we will be using inline style sheets for the examples. For visual learning purposes, our examples will also have a set margin of 1px as well as a padding of 1px by using the inline style "margin:1px;padding:1px;" in the list item tags (<li>) however, you will not see the styles.

« Prev · 1 · 2 · 3 · Next »