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:
<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>
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
Search WWH ::

Custom Search