O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling a Definition List

Problem

You want to line up definitions with terms from a standard definition list.

Solution

Create a valid definition list through HTML, as shown in Figure 6-20:

<dl>
 <dt>CSS</dt>
 <dd>Cascading Style Sheets</dd>
 <dt>HTML</dt>
 <dd>HyperText Markup Language</dd>
 <dd>How To Meet Ladies</dd>
 <dd>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et
 gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus
 unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio
 incongruous feline nolo contendre.</dd>
</dl>
Default rendering of the definition list

Figure 6-20. Default rendering of the definition list

Then create a margin on the left side of the entire definition list:

dl {
 margin-left: 5em;
}

Apply a width to the definition terms to be less than the value given to the left margin, as shown in Figure 6-21:

dt {
 width: 4em;
}
The definition term’s width set to 4 em

Figure 6-21. The definition term’s width set to 4 em

Next, float and clear the definition term while also using a negative value on the left side of the definition term to bring the term to the left of its definition, as shown in Figure 6-22:

dt {
 width: 4em;
 float: left;
 clear: left;
 margin:0 0 1em −5em;
 font-weight: bold;
}
Moving the term to the left side of the definitions

Figure 6-22. Moving the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required