CSSnewbie

Using Definition Lists: Question & Answer formatting

This guest article was written by Chris Coyier of CSS-Tricks, a site featuring tips, tricks, and tutorials on web design.

Unordered lists seem to get all the love these days, but there are just some things that are better semantically described with definition lists. Never heard of them? I’m not surprised. Here is the basic syntax:

<dl>
    <dt>Definition Term</dt>
    <dd>Definition Description</dt>
</dl>

There are two big differences between unordered lists and definition lists. One, there are two different elements that belong in a definition list: dt’s & dd’s. In unordered lists, all you have is li’s. Two, the only default styling applied to definition lists is a bit of a left-margin to the dd elements — no bullets or other strange positioning to fight.

Having two different tags to work with is what makes definition lists valuable. Take for example the need to create a FAQ’s page with a bunch of questions and their answers. Each question and answer group would really benefit from having a parent element, because then you could, for example, control the spacing between them or perhaps apply a border to visually separate them.

Many people would go straight for the div. With something like:

<div class="qa">
    <h4>Question</h4>
    <p>Answer</p>
</dl>	

The problem with this is that div’s are very commonly used. Chances are, your page is already using several so it’s likely you will need to apply an unique class to the div to style it individually.

Other people will go straight for the unordered list:

<ul>
    <li class="question">Question</li>
    <li class="answer">Answer</li>
</ul>

The problem with this is that since you only get li elements in your ul, you will need to apply unique classes to them in order to get different styling.

I propose that the best elements to use for something like question/answer content is the definition list:

<dl>
    <dt>Question</dt>
    <dd>Answer</dt>
</dl>

Will using a div or an ul work? Sure, they’ll work just fine and nobody is going to slap your hand for using them. But if you want to be a super hip semantics junkie, you’ll use a definition list. You get all the advantages: a parent element for styling the whole group and different tags for the question and answer so they can be styled separately without needing to use unique classes. If needed, you can also use multiple dt’s and dd’s and use them in any order you wish.

Check out this example of a question and answer list using definition lists (click the image to see a live example):

Create a Microsoft Word-Style Outline with CSS

One of the most useful properties of both unordered lists (which we fancied up earlier this week) and ordered lists is their ability to nest — that is, to contain lists within lists. And one of the most common examples of a nested ordered list in the real world (or at least, in my world) is an outline, be it a resume, a research paper, or something else entirely. But by default, the web doesn’t lend itself to really attractive or useful outlines… they tend to look something like this:

1. First item
   1. Indented item
   2. Another indented item
      1. Indented triple!
2. Not indented as much

As you can see, the browser doesn’t bother to vary the indentation style much, or change the list type from roman numerals to alphabetical characters and so on… all the things we’re so used to seeing because Microsoft Word and other writing programs do them by default. So let’s use a bit of CSS ingenuity to make a Microsoft Word-styled outline using ordered lists!

Before I started crafting this tutorial, I first took a look at what a default outline looks like when built in Microsoft Word 2003. Here’s a screenshot of that sample outline. This, my friends, is our goal.

The first step to building this outline in CSS is to properly nest your unordered list. It should look something like this:

<ol>
	<li>First Things First
		<ol>
			<li>Firstborn Children</li>
			<li>First Place Finishes</li>
		</ol>
	</li>
</ol>

As you can see from the code above, in order to properly nest lists, you need to place the sub-list inside of the list item you want it to be a subset of. So we’ve started an ordered list, opened our first list item, and then added an entirely complete ordered list to the mix before we close that list item.

Now that we know how to build the list, all we need is the CSS. For this, we’ll be using the list-style property along with a set of increasingly specific selectors for our rules. Our first rules look like this:

ol {
	list-style: upper-roman;
	margin-left: 2.25em;
	padding: 0; }
li {
	padding-left: 2em; }

These rules do a few things. The list-style property tells all of our ordered lists to use roman numerals instead of numbers. The margin and padding on the “ol” tag indents our list a respectable amount: specifically setting both margin and padding makes IE behave just like the other browsers, because IE indents lists using padding by default while all other browsers use margins. And last but not least, our padding-left on the list item adds some space between our roman numeral and the text, just like in our example outline from MS Word.

However, this CSS gets applied to all of our unordered lists, not just the first one. So we’ll need to use a set of increasingly specific selectors in our CSS to create the appropriate look. Here’s the full CSS for a complete four-level outline:

ol {
	list-style: upper-roman;
	margin-left: 2.25em;
	padding: 0; }
ol ol {
	list-style: lower-alpha;
	margin-left: 1.25em;}
ol ol ol {
	list-style: lower-roman;
	margin-left: 2.5em; }
ol ol ol ol {
	list-style: decimal; }
li {
	padding-left: 2em; }
li li {
	padding-left: .4em; }
li li li {
	padding-left: 0; }

Here, the “ol ol” rule means “only apply this style to ordered lists within ordered lists,” and “ol ol ol” does the same for third-level lists, and so on. As you can see, we’re setting the list style to lowercase alphabet on the 2nd level, lowercase roman numerals on the 3rd, and regular numbers on the 4th. We’re also adjusting the margin on the 2nd-4th levels of the list (and 2nd – 3rd levels of the list items) to make them more consistent with Word’s display. If you wanted to adjust them to something different, it’s a simple matter of changing the number of ems in the margins or padding.

After the 5th level, Microsoft Word simply cycles back through the same styles starting at the 2nd level, so if you wanted an outline more than four levels deep, you could just do something like this to save bytes and effort:

ol ol, ol ol ol ol ol {
	list-style: lower-alpha;
	margin-left: 1.25em;}

And that’s all there is to it! Here’s our completed example, complete with a little extra styling just for kicks to make it look more like Microsoft Word’s print layout (my editing layout of choice). If you’re interested, here’s the CSS I used for creating the print layout look:

body {
	background-color: #9099ae; }
#wrap {
	background-color: #fff;
	margin: 0 auto;
	width: 33em;
	border: 1px solid #000;
	border-right-width: 3px;
	border-bottom-width: 3px;
	padding: 5em 6em;
	font-family: "Times New Roman", Times, serif; }

And the best bit? This styling works pretty much everywhere: Firefox, Opera, Netscape, Safari, and even Internet Explorer 5.5 and up all behave themselves! (IE 5.5 ignores our “auto” margin in the print layout view, but it still gets the outline part right)

So now you can go out into the world, head held high, confident in your abilities to organize the myriad lists of the web into visually appealing outlines with wild, voracious abandon. You know… if that’s your sort of thing.

5 Ways to Set Your Unordered Lists Apart

Unordered lists are one of the most pervasive elements on the web, probably just behind paragraphs and hyperlinks in terms of their bunny-like abundance. And for good reason: bulleted (i.e., unordered) lists are a great way to convey a bunch of related information in a rather small space, which is often the preferred way to read on (and thus, write for) the internet.

Last week, I showed you how to turn an ordinary, unassuming unordered list into a navigation bar. And then we made that nav bar even cooler with a bit of JavaScript. But sometimes, you just need a list to be a list. But that isn’t to say it has to be a boring looking list. Here are five different ways to style your unordered lists with CSS.

1: Change your Bullets

Sometimes, all your list needs is a new set of bullets to set it apart from all the other lists out there. For that, you’d turn to the list-style-type attribute, like so:

ul {
	list-style-type: circle;
}

This sets your bullet type to a hollow circle, as shown in this example. And there are other list-style-types out there, as well. “Disc” is the default style, but “square” has a nice look, as well.

2: Add Margins and Padding

If you really want your list to stand out, you could do worse than to literally set it apart with a bit of margin and padding:

ul {
	margin: 2em;
}
ul li {
	padding-left: 1em;
	margin-bottom: .5em;
}

As you can see in this example, our first rule applies a 2 em margin to all four sides of our unordered list – moving it away from the surrounding paragraphs both vertically and horizontally. The left padding on the list item puts a little space between the bullet and the text, adding to the airy feel. The margin on the bottom of the list item opens a bit of space between the individual items in our list.

3: Use an Image

One of the easiest ways to make your lists truly unique (and to ensure they mesh well with your site’s design) is to use images instead of bullets. Here’s how to do it:

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

Easy, no? Yet the effect is dramatic: all of our list items now have a checked box next to them instead of a bullet. And it doesn’t have to be a checkbox, either – it could be anything your creative little heart desires. One caveat to this technique is to remember that, unlike the default bullet types, these images won’t grow and shrink with your items if your readers change the text size.

4: Borders, Backgrounds and the Hover Class

For a unique list style that doesn’t make use of images, you could always use borders, background colors, and the :hover pseudo-class to set your list apart:

ul {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
ul li {
	font-weight: bold;
	margin: 0;
	padding: 3px 10px 5px 20px;
	border-bottom: 1px solid #ccc;
	color: #666;
}
ul li:hover {
	color: #000;
	background-color: #ddd;
}

In this example, we’re turning off the bullets altogether with a list-style: none rule, then styling the list items by changing their color, giving them a bit of padding, making them boldface, and setting a border along the bottom. Then, when the user hovers their mouse over the list item, it darkens slightly and we apply a pale gray background color, which would help the reader keep their place in a long list more easily.

Of course, IE6 doesn’t recognize the :hover class on anything other than anchors, so if you needed this to show up in IE6, you’d need to apply an anchor to your text… which is why this technique is usually reserved for sidebar links or lists of similar ilk.

The Whole Shebang

Of course, why stop at just using one of these techniques, when you could apply several at once? Here’s our mega-styled list:

ul {
	margin: 1.5em;
}
ul li {
	list-style-image: url(uncheck.gif);
	border-bottom: 1px solid #ccc;
	padding: .2em 0 .2em .5em;
	font-weight: bold;
	color: #666;
}
ul li:hover {
	cursor: pointer;
	list-style-image: url(check.gif);
	background-color: #f2f2f2;
	color: #000;
}

In this attractive example, we are:

• Setting a margin on the list to set it apart,
• Setting padding and a border on the list item,
• Using an image instead of a bullet,
• Changing the font-weight and color of the text, and
• Using the :hover pseudo-class to change the cursor type, set a new list image, apply a subtle background, and darken the text.

Now that’s a nice looking list. Of course, as before, our hover elements won’t show up in IE6 (though IE7 will handle them fine). But our list is still pretty darn distinctive even without the hover class.

These are just five of a nearly infinite variety of options. What techniques do you use to set your lists apart? Oh, and be sure to subscribe to our feed, because later this week I’ll show you a trick for styling nested ordered lists that really makes them more attractive and user-friendly.