Lists are a great web design element because they allow for easy reading by the end user. Most users want answers quickly, and will only skim a website initially to see if it answers their question. This is especially true if they enter your website via a search engine.

The use of heading tags and lists are a great way to allow people to easily see the primary content of your website. If they feel the lists and subheadings are interesting, there is a greater chance they will remain on your site. This of course, leads to reduced "bounce" rates and helps to improve your website's credibility and ranking in the engines. Anything that improves readability, making it easier for the eyes to skim, will always benefit a website. A great design always keeps readability in mind.

CSS is an easy and very effective way to create stylish lists with custom bullets (markers). You can include different shapes or simple custom graphics that tie into your website's logo, colors or theme. For example, on a ghost tours website, I created a small ghost icon that was used in the side navigation bar and on unordered list items on the main page. It was simple, but very cute and tied into the sites theme, making those page elements stand out.

Other times bullets may distract from important content in a list. In that case, a list style property of "none" can be used to remove the automatically generated markers.

List Style Properties

Use the list-style-type property to select the type of marker that appears with each list item. Values available are disc, circle, square, decimal, lower-roman, upper-roman, lower-greek, lower-latin, upper latin, lower-alpha, upper-alpha, and none.

To specify your own image as a marker, use the list-style-image property as follows:

ul {list-style-image: url(imagename.jpg);
list-style-position: outside;
}

The url is relative to the stylesheet and should point to the folder where your image is. In this case, the image would be in the same folder as the css and html file. If you place your images in a separate folder, you would include that also: url(images/imagename.jpg)

Marker Positions

You can also customize the markers position. In the example above, the outside property makes the bullet appear outside the content area.
list-style-position: inside allows the bullet inside the content area so it runs into the list content.

Shorthand Technique

Another quick way to format a list using CSS is the shorthand technique. With this method, all list properties are specified in one single property:

ul
{
list-style: circle url("image.gif");
}

in the shorthand method, all of the values must appear in a specified order as follows:

list-style-type
list-style-position (inside, outside)
list-style-image

It doesn't matter if you skip a value, so long as the others remain in the correct order.

Custom lists are very useful and CSS makes them easy to achieve. Simple details transform average websites into top performing websites.