CSS: Formatting a Definition List

With the comeback of 'semantic markup' people are once again looking at what's the right tag to be using for different types of information. For example, unordered lists for navigation and tables only where absolutely necessary. One commonly overlooked option for markup of glossaries and definition lists is the dl attribute itself.

1. The Definition List (DL)

We know what the basic DL output looks like - not very attractive - which is why they are rarely used by webmasters. Here you can see an unformatted list with some sample content:

first item

definition for first item in list

second item

definition for second item in list
extending across more than one line

third item

definition for third item in list

There are two options for adding some formatting. The first is to start adding HTML tags such as for the 'data term' (dt) and maybe a smaller font size, or italics for the 'data definition' (dd). But we can do all that and more much better using CSS.

2. Example 1

Let's start with some simple CSS styles:

dt { font-weight: bold; text-decoration: underline; } dd { margin: 0; padding: 0 0 0.5em 0; }

Our simple list now looks a bit different. The indenting has been removed, some vertical padding inserted, and the data terms have been bolded and underlined:

first item

definition for first item in list

second item

definition for second item in list
extending across more than one line

third item

definition for third item in list

That's a move in the right direction, but probably still not enough to convince people of the merits of this approach. The following example should prove more persuasive.

3. Example 2

In the first example we were just tinkering at the edges of what's possible using CSS. This example uses slightly more advanced code to further enhance the appearance of the list:

dl { border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width: 100px; text-align: right; font-weight: bold; color: green; } dt:after { content: ":"; } dd { margin: 0 0 0 110px; padding: 0 0 0.5em 0; }

The list now appears as if the items were placed in a table:

first item

definition for first item in list

second item

definition for second item in list
extending across more than one line

third item

definition for third item in list

Even the most sceptical webmaster should now be starting to re-think their position.

4. Advantages of CSS formatting over HTML

So why are we doing this again? There are a number of reasons:

separation of content from formatting

this is the 'holy grail' for css programmers. As illustrated by sites such as css Zen Garden, separation means that the look and feel of a site can be drastically altered without changes to the underlying HTML code.

optimised for search engine spiders

it pays to be friendly to spiders as they're the only way to get your site to appear in search engine result pages (SERPs). The more advanced spiders are now starting to pay attention to how content is marked up and how that information can be incorporated into their search algorithms.

saves bandwidth

you also reduce the amount of HTML required each time a list is presented. If the CSS is sourced from an external file then it only has to download once and the browser can use a cached version for subsequent pages.

It might take some time to 'clean up' your existing HTML code and convert lists and other elements to CSS but the advantages now and ongoing make it worthwhile.