First, the dt rule is used to style the Contact details text (as per the h1 element in the
previous exercise), with the dd dt rule providing override styles for dt elements within a
dd element. This rule is aimed to style the equivalent of the h2 elements from the previous
exercise: the Mail and Telephone/fax text. The dd dd dt rule provides a third level of
override, styling the dt elements within the telephone/fax definition list. Also, because the
dt/dd pairs are displayed in a linear fashion by default, the dd dd dt rule floats the
telephone/fax list dt elements to the left, enabling the dd elements to stack to the right in
each case.
dt {
font: bold 1.5em/1.2em Arial, Helvetica sans-serif;
margin-bottom: 1.2em;
text-transform: uppercase;
}
dd dt {
font: bold 1.2em/1.5em Arial, Helvetica sans-serif;
text-transform: uppercase;
margin-bottom: 0;
}
dd dd dt {
float: left;
padding-right: 5px;
display: block;
text-transform: none;
}
The next two rules deal with formatting and fine-tuning of the text. The address rule adds
the gap between the bottom of the address and the telephone/fax heading, along with
reverting the address element content to normal text (it??™s italic by default). The second
rule in the following code block defines a font for the address element content and the
content of the telephone/fax definition list??™s term and definition.
GETTING USER FEEDBACK
343
8
address {
padding-bottom: 1.
Pages:
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444