How to Style a Definition List with CSS | 2

How to Style a Definition List with CSS

Step 4

Styling the links tag

#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.

The choice of color is yours, just change the values shown in the above styles.

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; 
  }

• margin:0; - sets the margin to zero so that the link will take up the area within the <dd> tag.
• padding:0; - sets the padding to zero for the same reason above.
• text-align:center; - makes the link text center aligned.
• border-top:1px solid #fff; - adds a 1px solid white top border.

‡ 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;
  }

• margin:0; - removes the margins.
• padding:0.4em; - adds a small amount of padding using em value.
• text-align:center; - makes the text centered.
• font-size: 1.4em; - sizes the text a little larger than the link text.
• font-weight:bold; - and make it bold.
• background: #69c; - makes the background a lighter blue.

‡ 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;
  }

• margin: 0; - removes the margins.
• padding: 0; - removes the padding.
• border-left:1px solid #fff; - adds a 1px white border down the left side of the list.
• border-right:1px solid #fff; - and also down the right side of the list.

‡ Step 8

We now have left and right 1px solid white margins on our definition list.

Step 9

Styling the #container

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

• width:12em; - sets the width in ems to a value that 'looks' right for the list.
• border-top:1px solid #fff; - adds a 1px solid white top border.
• border-bottom:1px solid #fff; - and a similar bottom border.

‡ 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

The top and bottom border has gone but the width remains at 12em.

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 <b></b> tags. These are styled to create strips of colors at the top and bottom of the definition list. <b></b> 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 <b></b> tags.

1. The first 1px high row is made up of a white background color with left and right margins 5px wide. The margins allow the background color to be visible.
2. The second 1px high row has a background color #69c, left and right borders 2px solid white and left and right margins 3px wide.
3. The third 1px high row has a background color #69c, left and right borders 1px solid white and left and right margins 2px wide.
4. The fourth 2px high row has a background color #69c, left and right borders 1px solid white and left and right margins 1px wide. NOTE that this row is 2px high.

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

Created: March 27, 2003
Revised: May 13, 2005

URL: http://webreference.com/programming/css_style/1