Web Design Tips: List Styling

Lists are a great way to display a group of items with simple and efficient HTML markup. In HTML, there are three different types of lists, each suited for different tasks.

First let’s look at the definition list. The purpose for this list is, as the name says, for definitions. While it isn’t not used too often, this list is good for things such as glossary pages. The markup consists of three tags; the list starts with the <dl> tag, each term in the list starts with the <dt> tag, and each definition starts with the <dd> tag. Here is an example of what the markup looks like…

<dl>
	<dt>Term 1</dt>
	<dd>This is the definition for term 1</dd>

	<dt>Term 2</dt>
	<dd>This is the definition for term 2</dd>
</dl>

Next up is the ordered list. The ordered list is a simple list with each item numbered. The list begins with the <ol> tag and each item starts with the </li> tag. The markup for an ordered list will look something like this…

<ol>
	<li>First item</li>
	<li>Second item</li>
	<li>Third item</li>
</ol>

…and the output for this markup would be…

1. First item
2. Second item
3. Third item

Now it’s time for the unordered list. This is the most commonly used list since it is the general purpose list. The markup is similar to the ordered list, except the list starts with the <ul> tag instead of the <ol> tag. List items still use the <li> tag. Here is the markup for the unordered list…

<ul>
	<li>First item</li>
	<li>Second item</li>
	<li>Third item</li>
</ul>

By default, the unordered list has solid black bullet points, like this…

• First item
• Second item
• Third item

Using some of the techniques discussed in my post about CSS basics you can alter the appearance of the list to match the rest of your site’s design.

In this example we are going to change the default bullet point to a custom one. We can do one of three things with the bullet point; we can change it with a preset type (such as square, disc, or circle; for a full list of types click here), we can change it with a custom image, or we can remove it completely. Let’s replace this disc with the image of a check mark (Image may be NSFW.
Clik here to view.). To do this, we will make a class, named checklist, for the list and edit the list-style-image property for that class. The CSS for this would be like this…

.checklist {
	list-style-image: url('images/check.png')
}

The url can point to the location of the image on the web server or it can point to an image hosted on another server, which would look like this…

.checklist {
	list-style-image: url('http://www.google.com/check.png')
}

Now we write our HTML markup for the list using the checklist class…

<ul class="checklist">
	<li>First item</li>
	<li>Second item</li>
	<li>Third item</li>
</ul>

And here are the final results…

• First item
• Second item
• Third item

These changes may be combined with other CSS techniques such as padding, margins, or font color to customize your lists even farther. If you have any questions be sure to leave a comment or email me and I will try to cover it in my upcoming tutorials.