Definition lists are an extremely useful, but often overlooked, HTML element used for creating lists of terms and definitions. Definition lists are similar to ordered and unordered lists, but there is one important difference. With definition lists, there are at least two tags per listed item: the term (<dt>) and the definition (<dd>), and there can be multiple terms and multiple definitions for a single item. So styling them is a tad trickier than with [un]ordered lists, but with CSS3, it’s a snap. First, let’s take a look at what a definition list looks like.

<dl>

  <dt>Nationality</dt>
  <dd>Canadian</dd>

  <dt>Languages Spoken</dt>
  <dd>French</dd>
  <dd>English</dd>

</dl>

There are many ways one could style definition lists, but I’m going to describe how to style them so they appear as columns, with the term(s) in the left column, and the definition(s) in the right. To clarify, I’ll give each element a different background color. First, we’ll give the entire definition list a width of 400 pixels and a left margin of 125px on a yellow background. The terms column will be 200 pixels wide and will have a negative 210-pixel left margin and a red background. The definitions will have a green background. All the major elements will float left.

dl {
	float: left;
	width: 400px;
	margin: 5px 0 0 210px;
	padding: 5px 0;
	font-size: 1em;
	line-height: 1.3;
	background: yellow;
}

dt {
	width: 200px;
	margin-left: -210px;
	float: left;
	clear: left;
	text-align: right;
	background: red;
	color: white;
}

dt:after {
	content: " :";
}

dd {
	margin: 0 0 0 3px;
	float: left;
	background: green;
	color: white;
}

dd:first-child {
	margin: 0 0 0 203px;
	float: none;
	background: purple;
}

And here’s what it looks like (of course, you can (and should) style it however you want):