HTML and CSS Reference
In-Depth Information
.critique dt img {
display:block;
border:2px solid black;
float:left;
margin:0 10px 10px 0;
}
.critique dd {
margin:10px 0 60px 0;
border-bottom:2px solid silver;
background: url(dd-bg.jpg) repeat-x bottom;
}
Figure 12-20 shows the effect. Does it look like a definition list now?
Figure 12-20.
A more “defined” style
If you've determined that the markup you are after for a given purpose is a definition list,
you would do well to check out Russ Weakley's tutorial on Maxdesign.com (
www.maxdesign.
com.au/presentation/definition/index.htm
), which includes a gallery of styling options.
Summary
With the humble ordered, unordered, and definition lists, you can create a raft of features on
a web page and style it in CSS to suit almost any whim. It's no longer a technique that's exclu-
sive to just a handful of in-the-know web standards snobs with their shiny, up-to-the-minute
browsers—it's something that enjoys excellent support across current browsers. There is no
excuse for not using lists where a list is the perfect candidate for the job. Simple markup com-
bined with some clever CSS and some nice graphical touches—it's a winner every time. And
with that, it's time to look at the oft-uncharted territory of styling for print and other media.
