In this post, I'm going to show you how to stylize an hCard with CSS. An hCard is a specification which defines a new type of microformat. In simple terms, it is defined as:
hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard (RFC2426) properties and values in semantic HTML or XHTML. hCard is one of several open microformat standards suitable for embedding in HTML, XHTML, Atom, RSS, and arbitrary XML.
In our example, we're going to stylize the following hCard:
<div class="vcard">
<a class="fn org url" href="http://onwebdev.blogspot.com/">onwebdev</a>
<div class="adr">
<span class="type">Work:</span>
<span class="street-address">Some address</span>
<span class="locality">A City</span>,
<abbr class="region" title="Region">A Region</abbr>
<span class="postal-code">000000</span>
<span class="country-name">Italy</div>
</div>
<div class="tel">
<span class="type">Work</span> +39-00-00-00
</div>
<div class="tel">
<span class="type">Fax</span> +39-00-00-00
</div>
<div>Email:
<span class="email">gabriele.romanato@gmail.com</span>
</div>
</div>
with the following CSS styles:
.vcard {
height: 100%;
border-top: 3px solid #000;
border-bottom: 2px solid gray;
padding: 0.4em 0;
}
a.url {
display: block;
height: 100%;
color: #339;
font: 1.3em Georgia, serif;
background: url(img/warning.png) no-repeat 0 0;
padding-left: 19px;
border-bottom: 1px solid gray;
}
.adr {
width: 90%;
margin: 10px auto;
padding: 5px 5px 5px 19px;
background: #eee url(img/name.png) no-repeat 0.3em 0.5em;
border-left: 4px solid gray;
border-right: 4px solid gray;
}
.adr span {
font-style: italic;
padding: 0 0.3em;
}
.adr span.type {
display: block;
height: 100%;
font: normal 1.3em Georgia, serif;
color: #666;
border-bottom: 1px dashed;
}
.tel {
height: 100%;
margin-bottom: 10px;
padding: 5px 0 5px 19px;
border-bottom: 1px dashed gray;
background: url(img/subject.png) no-repeat 0 0.5em;
}
.tel .type {
font-weight: bold;
}
div.tel + div.tel + div {
height: 100%;
margin: 10px 0;
padding: 5px 0 5px 19px;
border-bottom: 1px dashed gray;
background: url(img/email.png) no-repeat 0 0.4em;
font-weight: bold;
}
div.tel + div.tel + div > .email {font-weight: normal;}
As you can see, there's nothing really difficult here. Of course this is only a basic example, but you can extend it further. You can see the final result here.