HTML and CSS Reference
In-Depth Information
Note
In case you're thinking “Hang on, you've replaced one CSS selector of
current
with five different
contextual selectors . . . and you stillneed to update the body element. What's the benefit?” Agreed, on
a small, simple site there may not be a massive benefit to doing this. But like the body style switching tech-
nique, this approach could be used to change a number of different parts of the page, thanks to inheritance,
which would negate the need for making multiple changes in the document. One change higher up the doc-
ument tree can affect multiple child elements. It's a good way to start thinking about things, and this is
a great—and simple—practical example to start off with.
■
Styling Definition Lists
So far, we've focused on unordered and ordered lists. They are great mechanisms for suggest-
ing hierarchy and collecting together groups of related things, such as a collection of links
used in a header or a simple to-do list. However, these are not the only kinds of lists available
to you in XHTML. There is another, oft-misunderstood list that can be incredibly useful for
suggesting relationships between items: the definition list. You can also do quite a lot with it in
CSS—and after all, isn't that the purpose of this topic?
The basic markup required for a definition list is as follows:
<dl>
<dt>
SLR
</dt>
<dd>
Abbreviation of Single Lens Reflex
</dd>
<dd>
A specific type of camera - one that uses a mirror to display the
<em>exact</em> image to be captured through the viewfinder</
dd>
<dd>
SLR cameras are usually used by professional, semi-professional and
hobbyists as they offer greater creative control than a point-and-shoot
camera
</dd>
</dl>
The building blocks are
•
dl
—for definition list
•
dt
—for definition term
•
dd
—for definition description
The premise behind the definition list is that a relationship exists between two parts: the
dt
contains the item you are referring to, while the content of the
dd
provides further informa-
tion about or related to that
dt
element. You can also have multiple
dd
elements, as our example
shows, and you can even include other block-level elements inside the
dd
element (in fact, you
could place an unordered list inside the
dd
). Unfortunately, you cannot place block-level ele-
ments inside the
dt
element, as much as you might be tempted to. That said, definition lists
have a number of possible practical uses, including
•
Schedules for events
•
Critiques of goods, hotels, services, etc.
•
Descriptions of geographic locations
