How to Style a Definition List with CSS

Introduction

Most tutorials on the styling of CSS lists for menus use unordered lists, which, for people starting out with CSS, can be a little difficult to grasp as the use of unordered lists requires extra styling to remove the bullets.

In this tutorial I demonstrate how to style a Definition List, which is equally suitable for menus, but is a little easier to understand.

Here's how to begin, using the following Definition List ...

Art Gallery: Paul Cezanne; Henri Matisse; Vincent van Gogh; William Turner; John Constable; Claude Monet

...and, with the minimum amount of extra code and a little CSS, end up with a stylish menu like this, which incidentally does not use any graphics:

Styled Definition List

Method

Step 1

The Definition List (X)HTML

The basic Definition List source code is shown below:

<dl id="gallery">
  <dt>
    Art Gallery
  </dt>
  <dd>
    <a href="#nogo" title="Paul Cezanne">
      Paul Cezanne
    </a>
  </dd>
  <dd>
    <a href="#nogo" title="Henri Matisse">
      Henri Matisse
    </a>
  </dd>
  <dd>
    <a href="#nogo" title="Vincent van Gogh">
      Vincent van Gogh
    </a>
  </dd>
  <dd>
    <a href="#nogo" title="William Turner">
      William Turner
    </a>
  </dd>
  <dd>
    <a href="#nogo" title="John Constable">
      John Constable
    </a>
  </dd>
  <dd>
    <a href="#nogo" title="Claude Monet">
      Claude Monet
    </a>
  </dd>
</dl>

To add the curved corners and the white border we need to use an outer containing div and a group of <b></b> tags at the beginning and the end of the containing div.

Our finished Definition List source code will then look like this:

<div id="container">
  <b class="top">
    <b class="b1"></b>
    <b class="b2"></b>
    <b class="b3"></b>
    <b class="b4"></b>
  </b>
  <dl id="gallery">
    <dt>
      Art Gallery
    </dt>
    <dd>
      <a href="#nogo" title="Paul Cezanne">
        Paul Cezanne
      </a>
    </dd>
    <dd>
      <a href="#nogo" title="Henri Matisse">
        Henri Matisse
      </a>
    </dd>
    <dd>
      <a href="#nogo" title="Vincent van Gogh">
        Vincent van Gogh
      </a>
    </dd>
    <dd>
      <a href="#nogo" title="William Turner">
        William Turner
      </a>
    </dd>
    <dd>
      <a href="#nogo" title="John Constable">
        John Constable
      </a>
    </dd>
    <dd>
      <a href="#nogo" title="Claude Monet">
        Claude Monet
      </a>
    </dd>
  </dl>
  <b class="bottom">
    <b class="b4"></b>
    <b class="b3"></b>
    <b class="b2"></b>
    <b class="b1"></b>
  </b>
</div>

This is all that is needed to be added to the Definition List source code.

If you don't want the curved corners then leave out the "top" and "bottom" classes.

Step 2

Now that we have the definition list in a suitable format, I'll take you through the various stages of styling

Firstly and most importantly, make sure that you have the correct (X)HTML !DOCTYPE. Without this most browsers will be thrown into 'quirks' mode which will lead to all sorts of incompatibility problems. W3C QA - List of valid DTDs has a list of valid DOCTYPES that can be used. Select from XHTML1.0 or XHTML1.1 as these are more suitable for this styling. I use XHTML1.1 for all my current web pages.

The definition list with NO styling will appear as below:

Step 2

Step 3

Styling the body tag

body {
  font-family:arial, verdana, sans-serif; 
  font-size:0.8em; 
  background:#8be; 
  color:#fff;
  }

The body style sets the font to arial as first choice, verdana as second choice and the generic sans-serif as default (you should always set a default generic font as the final choice in the font-family list). The default font size is set in ems to allow the text size to be user selectable. This menu can be infinitely resized and it will always stay in shape.

The background color is pale blue to show off the white border that will be applied to the list. The default text color is white.

Step 3

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

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

How to Style a Definition List with CSS