Belgian beer types, or how to style a definition list the CSS3 way

Definition lists are an often forgotten HTML element, but they can be used in a wide variety of ways, and are actually the most semantically accurate element in many cases. So let’s see how we can mix up beer, HTML and CSS3, while explaining the purpose of the definition list element.

When to use a DL

First, what has the W3 to say about this?

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description.

That means we can use them whenever we have something that needs a description. For example: a list of Belgian beer types, a list of services provided by a company, a list of the persons in a team, etc. Pretty straightforward: instead of using a normal list (ul) with headings and paragraphs in between, we can use an element which already has tags for our definition terms and descriptions.

The anatomy of a DL

A definition list is made up by 3 different tags: the opening dl tag; the definition term tag (dt); and the definition description tag (dd). That would look like this:

<dl>
	<dt>Term goes here...</dt>			
	<dd>Description goes here...</dd>
</dl>

Still easy, right?

To mix things up a bit, we can have more than one term, to more than one definition. For example, a word in a dictionary can have two correct ways of spelling and more than one definition.

Beer o’clock

Now we are going to style a definition list of Belgian beer types (which I recently tried and loved!).

First, some HTML:

<div id="beers">
	
	<h1>A Definition List: Belgian Beer Types</h1>
			
	<dl>
			
		<dt>Amber ales</dt>			
		<dd>These are beers similar to the traditional pale ales of England, although somewhat less bitterly hopped. A notable example is the 5% abv De Koninck brand, with its distinctive spherical glasses (called 'bollekes').</dd>
				
		<dt>Blonde or golden ale</dt>			
		<dd>These are a light variation on pale ale, often made with pilsener malt. Some beer writers regard blonde and golden ales as distinct styles, while others do not.</dd>
				
		<dt>Brown Ale</dt>			
		<dd>Regular bruin or brune beers such as Grottenbier are darker than amber ales, less sour than Flemish brown ale, and less strong than dubbel.</dd>
				
		<dt>Dubbel</dt>			
		<dd>Dubbel has a characteristic brown color. It is one of the classic Abbey/Trappist types, having been developed in the 19th century at the Trappist monastery in Westmalle.</dd>
				
		<dt>Enkel</dt>			
		<dd>This beer is the basic recipe for what was traditionally a range of three beers of increasing alcohol content.</dd>
				
		<dt>Flemish Red</dt>			
		<dd>Typified by Rodenbach, the eponymous brand that started this type over a century ago, this beer's distinguishing features from a technical viewpoint are a specially roasted malt, fermentation by a mixture of several 'ordinary' top-fermenting yeasts and a lactobacillus culture and maturation in oak.</dd>
			
	</dl>
		
</div>

So, we’re wrapping our content in a nice container (div), then a little descriptive title (h1) for our page and finally our definition list, with the beer types as definition terms (dt) and each description as a dd.

CSS 3 magic

I should warn you: this WILL NOT work on IE6. The page will still have its colours and main formatting, but none of the sweet CSS 3 styling is going to be seen. When you’re driving an inferior car, you don’t expect it to go as fast as a Ferrari, do you? You’ll still get there, but with less, or no style.

First we’ll add some defaults to our stylesheet (you should be using a proper reset on your stylesheets, but let’s make things simpler here), and we’ll also style the container div:

body { 
	margin: 0; 
	padding: 20px; 
	text-align: center;
	background: #fff;
	}

h1,
dl, dt, dd,
p,
a {
	margin: 0;
	padding: 0;
	}

#beers {
	width: 500px;
	padding: 20px;
	margin: auto;
	background: #eeebe3;
	border: 5px solid #5a523d;
	text-align: left;
	}

Let me know in the comments if you need explaining for this part…

Now onto the type bit:

h1 {
	font: 32px "Delicious-Bold", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	text-align: center;
	color: #3d3111;
	margin-bottom: 20px;
	}

p {
	font: 16px/1.3 "Delicious-Bold", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	}

And this is where the fun begins: we are going to use the @font-face attribute to call the Delicious typeface. Remember that this typeface is available for @font-face embedding (you can see a list of available fonts in the Useful links section of this post), but not all are.

We’ll add this bit to the beginning of our stylesheet, before the body style details, so that all the @font-face info is easily seen. We then only have to call the font we want to use by the font-family value we give it here (see code above):

@font-face{
	font-family: 'Delicious'; 
	src: url('Delicious-Roman.otf') format('opentype');
	}

@font-face{
	font-family: 'Delicious-Bold'; 
	src: url('Delicious-Bold.otf') format('opentype');
	}
	
@font-face{
	font-family: 'Delicious-Heavy'; 
	src: url('Delicious-Heavy.otf') format('opentype');
	}

And now, our definition list:

dl {
	margin-bottom: 20px; 
	}
	
	dt {
		font: 22px "Delicious-Heavy", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
		text-shadow: rgba(255,255,255,.8) 2px 2px 0;
		text-align: center;
		color: #822020;
		margin-bottom: 5px;
		}

OK, lots to talk about here!

First we add a bottom margin to the dl, so that there is some space between it and the paragraph that comes next.

Then we define the font size and font family for our dt (and dd, see bellow, after the image).

We also add a nice little shadow to both of them. For that, we are using RGBa colours, which allow us to add, besides the r,g and b values, a transparency value between 1 (fully opaque) and 0 (fully transparent). The values that come after the rgba are the horizontal and vertical offset of the shadow, and then the amount of blur (in this case, zero).

Next, we add some white space around our terms, and give it a reddish colour.

Finally, we are going to add a decorative border to each of our descriptions, but we’re not using a background because each description has a different length: we need something more flexible, and we need to show off our CSS3 skills too. So we are going to use the border-image property.

The border-image property allows us to use an image and specify how much of its borders we want to apply to the borders of our element.

We need to specify the width of the border of the element, in this case it will be 20px. After that, we will specify the image we’re using for our border, which in our case is this one:

bubble

(Do you see a nasty light blue background around this image? You’re using IE6!)

We will also need to say how much of the image we are using for our borders: 20; and how it should behave: will it stretch to the size of the element, or will it be repeated? In our case, we want it to stretch. And this is what we get:

dd {
	font: 16px "Delicious", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	text-shadow: rgba(255,255,255,.5) 1px 1px 0;
	padding: 10px;
	border-width: 20px;
	-moz-border-image: url(bubble.png) 20 stretch;
	-webkit-border-image: url(bubble.png) 20 stretch;
	-khtml-border-image: url(bubble.png) 20 stretch;
	border-image: url(bubble.png) 20 stretch;
	margin-bottom: 30px;
	}

We are using the vendor specific properties so that the border-image is understood by all of them. Someday, we will only need the last line of this bit of code, instead of 4 lines.

Browser support

I’ve said that this is not going to work on IE6. What I didn’t say, was that it doesn’t work on IE8 or 7 either. Oh, and Opera will ignore the border-image property (at least on my copy of Opera 9.64, but correct me if I’m wrong).

For Internet Explorer to understand the @font-face attribute, you will need to use the EOT font format, so you will have to duplicate the 3 @font-face attributes and use the .eot files for that.

Conclusion

Hopefully this made it a bit easier to understand how definition lists can be really useful, and how CSS 3 makes styling rich designs so much easier.

You can download the example files bellow, and you can grab the Delicious font from here.

View example [download id=”8″]

Was this post too short? Did you need more details to understand what just happened? Let me know in the comments.

Useful links