Defining the HTML

In the details widget, there are a number of lines of plain text displaying the the person's address, date of birth and so on. The person's name, reference number and contact details have specific presentation requirements and which means they need to be distinguished in the HTML so that specific CSS rules can be applied to them. The following HTML structure for the details widget achieves this:

Figure 1. HTML Output of the Details Widget

<div class="person-details-container">
  <div class="header-info">James Smith - 24684</div>
  <div>1074, Park Terrace, Fairfield,
  Midway, Utah, 12345</div>
  <div>Male</div>
  <div>Born 9/26/1964, Age 46</div>
  <div class="contact-info">
    <img src="../Images/phone_icon.png">1 555 3477455
    <span class="email-container">
      <a href="mailto:info@example.com">
        <img src="../Images/email_icon.png"/>
        info@example.com
      </a>
    </span>
  </div>
</div>

The HTML above is formatted for clarity, but it will be generated without any indentation or line breaks, as these are not necessary for the browser to present the e-mail address properly and only increase the size of the page.

It is good practice to give a widget a single root node with a specific CSS class. It is the basis of making CSS rules as specific as possible to this widget. The "root" class is used when when defining CSS rules for all content within the widget. The root div element has been given the person-details-container class name. Each line of text in the details panel is represented by a div element. Additionally, two div elements have CSS class names so that specific CSS rules can be applied to them. Note that the HTML representing the e-mail address is identical to that described in An E-Mail Address Widget.

Figure 2. Custom CSS for the Details Widget

.person-details-container .header-info {
  color: #FB7803;
  font-size: 140%;
}
.person-details-container .contact-info img {
  vertical-align: middle;
}

The header-info and contact-info classes allow the specific presentation requirements (e.g. changing the font) to be implemented. Note that the CSS rules are made as specific as possible by using the person-details-container class name in every rule.