Definition-List Style

The following definition-lists have identical HTML code in the body of the document:

  <dl class="…">
    <dt>One</dt>
      <dd>is the first item in the list.</dd>
    <dt>Two</dt>
      <dd>is the second item in the list.</dd>
      <dd>There are two definitions.</dd>
    <dt>Three</dt>
      <dd>is the third item in the list
        and has a much longer definition
        than the other two so that it will
        require more than one line to display.</dd>
  </dl>

the only difference being the <dl class="…"> that selects the CSS style to be applied.

Simple list:

One

is the first item in the list.

Two

is the second item in the list.

There are two definitions.

Three

is the third item in the list and has a much longer definition than the other two so that it will require more than one line to display.

Numbered list:

One

is the first item in the list.

Two

is the second item in the list.

There are two definitions.

Three

is the third item in the list and has a much longer definition than the other two so that it will require more than one line to display.

Run-in list:

One

is the first item in the list.

Two

is the second item in the list.

There are two definitions.

Three

is the third item in the list and has a much longer definition than the other two so that it will require more than one line to display.

Agenda list:

One

is the first item in the list.

Two

is the second item in the list.

There are two definitions.

Three

is the third item in the list and has a much longer definition than the other two so that it will require more than one line to display.

Box list:

One

is the first item in the list.

Two

is the second item in the list.

There are two definitions.

Three

is the third item in the list and has a much longer definition than the other two so that it will require more than one line to display.

Silly list:

One

is the first item in the list.

Two

is the second item in the list.

There are two definitions.

Three

is the third item in the list and has a much longer definition than the other two so that it will require more than one line to display.

As always, these CSS styles work only if the HTML code in the body contains no formatting instructions. Of course no good HTML code ever would, as its purpose is strictly to describe the content, not the appearance.