If you've ever had to display a list of items on an HTML page, you've probably tried the <ol> and <ul> tags and opted to just make a list yourself with some spacing or tables or...  well, any method you can come up with other than using those list tags. They work great but, you are at their mercy with those big black dots, huge spaces and the indent is wild. But it does not have to be that way.

Lists have some very special CSS styling options which allow you a lot of control over the look and feel of your lists. It's important to first note, if you weren't already aware, that lists have 2 different elements... the list (either <ol> or <ul>) and their items (<li>). These can each have their own separate styles and to achieve some desired layouts, you will have to affect both independantly.

UL / OL

Spacing

Lists indent the items automatically to the right to make room for the dots or numbers which precede them, also to make them stand out from the rest of the text. Sometimes it can be too much, sometimes not enough. The reason for this is padding and this can be affected by CSS.

This will result in there being no padding at all and all listed items will now line up to the left with the rest of the text around it. From there you can adjust it however you see ift. For <ol> tags, obviously you would use ol in your CSS instead of ul. Some browsers use padding to indent the items, some browsers use margin. It's best to set both to 0px so that you can adjust the indent as you wish using either, or both.

List Style

The first and most fun one is list-style-type but you can also just use list-style and it will know what you mean.

This is where you get to have some real fun with those annoying little dots. Using the list-style modifier, you can change those dots to any one of the following:
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

and for ordered lists, the options are:
decimal | lower-alpha | upper-alpha | lower-roman | upper-roman

The ohter option you can use if none of those do it for you, is to use the list-style-image option. This is where you can put in arrows, diamons, checkmarks.. what ever you can dream up in an image program.

This will put your arrow.gif into the place of those dots and look a whole lot better... however you may be asking why I would specify the square type if the arrows are already there. Well, the reason for this is that your arrows may not always show up... whether the surfer has images off, blocked for your server, a slow/glitchy connection... what ever reason, if the arrows can't be pulled up to the page, it will then fall back to the type, showing the squares instead of the dots.

The last option which is usually quite forgotten about is list-style-position. What this does is tells the text how to behave if it should wrap down a line. Choosing list-style-position: inside; means that text will fall inside the bullets, in a nice neat block of text. Choosing list-style-position: outside; will allow the text to wrap outside of the bullet, meaning that it will be below the last and above the next bullets in the list.

LI

Items have their own special properties, the most important of which is spacing. But you can also do a few other special things.

Most of this should look familiar but there is a couple of new lines that have not been covered in my previous tutorials.

float: left; tells each <li> that it is supposed to "float" to the left of the item beside it, but because every <li> element is told this, what they will actually do is all line up horizontally since the first is told to be to the left of the others, then the next is to the left, then the next and so on in order.

border: 1px solid #000000; tells each <li> element to have a border around it, exactly 1 pixel in width, be solid (you can try dotted), and to be black.

The rest you already know, the margin sets a bit of space to the left (5 pixels) and the padding sets some white space on top and bottom of 3 pixels and left and right at 10 pixels.

You should get something like this:

Now that is a much better looking list!

Text

I won't go into great detail since you should be able to style text already and if not, please go back and read the previous tutorial. All CSS properties in that tutorial apply here and can be used in your lists.

Conclusion

Feel free to experiment with images for bullets, roman numbers for ordered lists, lots of padding, no padding, borders, underlines... the sky is the limit and really, that's the beauty of CSS. No more having to creatively find some 'quick fix' way of making a nicer looking list. With CSS, you can make them any way you want them.