Complete Css Style Sheet Resource: details

In this chapter, and in the microformats exercise, the address and other contact details
were styled using paragraphs and line breaks. An alternative structure, which perhaps has
greater integrity from a semantic standpoint, is to use a definition list, with further nested
definition lists within. At the top level, the term is Contact details and the definition is
the actual contact details. At the next level, there are two terms, Mail and Telephone/fax,
each with respective definitions. For the latter, the definition has a third definition within,
providing term/definition pairs for the different types of telephone and fax numbers.
<dl>
<dt>Contact details</dt>
<dd>
<dl class="vcard">
<dt>Mail</dt>
<dd>
<address>
Company name 
00, Street Name 
Town or City 
County or Region 
Postal/ZIP code 
Country name
</address>
</dd>
<dt>Telephone/fax</dt>
<dd>
<dl>

<dt>Tel:</dt>
<dd>+1 (0)0000 555555</dd>
<dt>Fax:</dt>
<dd>+1 (0)0000 555556</dd>
<dt>Mobile/cell:</dt>
<dd>+1 (0)7000 555555</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
For the CSS, use the existing rules from using-microformats.css in the usingmicroformats-
starting-point folder, and the .vcard rule from the previous exercise.
The following rules can then be used to style the definition list and its contents.
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.

address {
padding-bottom: 1.5em;
font-style: normal;
}
address, dd dd dt, dd dd dd {
font: 1.2em/1.5em Verdana, Arial, sans-serif;
}
With these styles added, the contact details look virtually identical to those in the exercise.
At this point, you can add hooks for the vCard as per steps 2 and 3 of the “Using microformats
to enhance contact details” exercise. See contact-details-structure-redux.css
and contact-details-structure-redux.html in the chapter 8 folder for the completed
files.
We’ve covered plenty of ground here, so now it’s time to leave the subject of collecting
user feedback and progress to the next chapter, which explores how to test your websites
and deal with common browser bugs.

1. Add a surrounding div. Open using-microformats.
html, and place a div with a class value of vcard
around the contact details content, as shown (truncated)
following:
<h1>Contact details</h1>
<div class="vcard">
<h2>Mail</h2>
[...]
Mobile/cell: +1 (0)7000 555555
</div>

2. Structure the address. Marking up the address is fairly
simple, and few changes are required to the general
structure of the code. However, because each individual set of information requires
its own container, and the best way of creating a container for the address is to
place it within a block element of its own, the company name and the address each
need their own paragraphs, rather than a line break separating the two. The organization’s
paragraph is then given a class value of fn org. Here, fn stands for “full
name” and org defines that the name belongs to an organization, rather than a
person.
The address paragraph’s class value is adr, and each line of the address is placed
within a span element. The various class values assigned to the spans denote
which element of the address the content refers to, and those are all straightforward
to understand. However, address books—and therefore microformats—
enable you to distinguish between different types of data. For example, you can
have a work address or a home address. This can be defined by adding the relevant
word (e.g., work) and wrapping it in a span with a class value of type, thereby
defining the type for the parent property. In this case, the address is being defined
as a work address.
For cases when you don’t want this information shown on the web page (which will
likely be most of the time—after all, adding a lowercase “work” in front of the
street name hardly looks great), add a second class value, hidden. Later, CSS will
be used to make content with a hidden value invisible.
<h2>Mail</h2>
Company name

work
00, Street Name

Town or City 
County or Region 
Postal/ZIP code
Country name

3. Structure the telephone/fax details. Each definition for a telephone number
requires its own container, and so the single paragraph must be split into three, as
shown in the following code block. Each paragraph’s class value should be tel. As
with the address, a span with a class value of type hidden is used to define the
type for each parent property. For tel, there are various options available, including
work, home, fax, cell, pager, and video. Should duplicate types be required
(such as for a work fax), two type spans are added. As for the contact number
itself, that’s placed in a span element with a class value of value.
<h2>Telephone/fax</h2>

Tel: work
+1 (0)0000 555555

Fax: fax
work
+1 (0)0000 555556

Mobile/cell: cell
+1 (0)7000 555555
4. Style headings and paragraphs. The style sheet,

using-microformats.css, already has some
defined styles, which do the usual removal of
margins and padding and setting of the default
font size. The body rule also adds some padding
to the page content so that it doesn’t hug the
browser window edges. To this, add the following
three rules, which style the headings and paragraphs.
Both headings are rendered in uppercase
Arial, helping them to stand out, aiding visual
navigation of the contact details.
h1 {
font: bold 1.5em/1.2em Arial, Helvetica
å sans-serif;
margin-bottom: 1.2em;
text-transform: uppercase;
}

h2 {
font: bold 1.25em/1.44em Arial, Helvetica sans-serif;
text-transform: uppercase;
}
p {
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 1.5em;
}

5. Hide hidden elements. As noted in steps 2 and 3, some information requires a type
to be defined for it, but as you can see in the previous image, this is displayed
onscreen like any other content. This is why the hidden value was also applied to
the relevant span elements. By adding the following rule, these spans are made
invisible.
.hidden {
display: none;
}

6. Deal with margin issues. Because the telephone
details are each in an individual paragraph, they
each have a bottom margin, and this makes the layout
look awful. The same problem also affects the
company name paragraph. However, because each
paragraph has its own class attribute value, it’s
easy to remove the bottom margins from the relevant
paragraphs using the following rule:
.tel, .fn {
margin-bottom: 0;
}

7. Embolden the company name. Balance-wise, the
company name could do with standing out more. This is within a paragraph that
has a class value of org, so making the contents bold is child’s play—just add the
following rule.
.org {
font-weight: bold;
}

8. Finally, style the vcard div via the following rule. This sets a background color,
width, border, and padding, but perhaps the most important property here is
margin-bottom. This is required because the margins from paragraphs with a tel
class were removed in step 6. When you add a bottom margin to the vcard div, the
typical spacing you’d expect after a paragraphs returns.
.vcard {
width: 200px;
background: #eeeeee;
border: 1px solid #cccccc;

padding: 8px;
margin-bottom: 1.5em;
}
Note that further simplification of some elements of the code shown in the exercise is
possible. For example, where you have the Fax line, the type span could be directly
wrapped around the relevant label, and the hidden class removed.
Where before you had the following:

Fax: fax
work
+1 (0)0000 555556
you’ll now have this:

Fax:
work
+1 (0)0000 555556
The same is also true for the Mobile/cell line.
Note also that this is a relatively new technology, so it’s not without its drawbacks. As mentioned
earlier, some details are not carried through to some address books. Also, the need
to hide extra data is problematic, since under some circumstances (such as in text readers),
it will be displayed, which could lead to confusion. However

Complete Css Style Sheet Resource

Pages

Wednesday, September 29, 2010

Contact details structure redux

How to use microformats to enhance a set of contact details.