How to Style a Definition List with CSS

#gallery a, #gallery a:visited {
  color:#fff; 
  text-decoration:none; 
  display:block; 
  padding:0.4em;
  background: #47a;
  }

Working from the inside out, I have chosen to style the links first, then work outwards to the list tags and finally to the borders.

The #gallery a and #gallery a:visited have the same styles in my example, but you could style them differently to show visitors which links have been visited.

‡ Step 4

The above example will show that the background color of the links has been set to dark blue, BUT they stretch the full width of the screen. This is because we have set the style to display:block and without any specified width this will be taken as full screen.

Step 5

Styling the links :hover

#gallery a:hover {
  background: #258; 
  color:#9cf;
  }

‡ Step 5

If you hover the mouse over the list in the above example you will see that the background and text change color.

For those of you who are wondering why there are only three digits in the color value instead of the usual six, this is a shorthand way of specifying colors when the six digit value has repeated pairs. To elaborate, #9cf is short for #99ccff and #258 is short for #225588, etc.

Step 6

Styling the dd (definition)

Moving 'outwards' through the Definition List we arrive at the definition tag <dd>.

dd {
  margin:0; 
  padding:0; 
  text-align:center; 
  border-top:1px solid #fff; 
  }

‡ Step 6

The link text is now centrally positioned and they stretch the full width of the browser window due to the margin and padding being set to zero.

Step 7

Styling the dt (term)

dt {
  margin:0; 
  padding:0.4em; 
  text-align:center; 
  font-size: 1.4em; 
  font-weight:bold; 
  background: #69c;
  }

‡ Step 7

The definition list 'term' is now also the full width of the browser window and is central located above the link text.

Step 8

Styling the dl (list)

dl {
  margin: 0; 
  padding: 0; 
  border-left:1px solid #fff; 
  border-right:1px solid #fff;
  }

‡ Step 8

Step 9

Styling the #container

#container {
  width:12em;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
  }

‡ Step 9

The outer container div holds it all together. Defining the width in em values allows this to be resized in proportion to the text size.

If you don't want rounded corners and borders you can stop here, but if you want to take the styling a step further to include my 'snazzy borders' then read on.

Step 10

Re-styling the #container

#container {
  width:12em;
  }

Because the top and bottom 1px white borders are not required we can remove them from the styling.

‡ Step 10

Step 11

'Snazzy borders'

'Snazzy borders' is a very simple method of adding borders to curved corners without the need for graphics. These borders will stay in shape no matter how the size of the #container div changes.

If you look at the source code you will see a top and bottom set of nested tags. These are styled to create strips of colors at the top and bottom of the definition list. tags have been used because browsers have no problem in nesting them and the take up less file 'space' than span tags.

Also, if anyone is browsing with CSS switched off then these tags will degrade well and not produce any noticeable change to the list.

These strips of color are arranged in such a way as to give the impression of a curve, when in fact the are just strips of two colors as shown in the graphic below.

We're interested in the first and last five rows which are produced by our four nested tags.

When reduced to actual pixel size the white borders give the impression of a curve.