At this stage, you'll add your new styles to the HTML documents on your library website. This may involve adding some additional site branding and supplemental navigation for mobile device users.

Branding

To make the site branding display as desired in each media type, you'll need to refer to both of them in the code on every page on your site. Here's one way of doing this using the <div> XHTML element.

To make the regular banner display on desktop or laptop computers:

      <div id=”header”><img src=”images/banner.gif” alt=”Your Library Name” /></div>

To make the alternative logo display on mobile devices:

      <div id="logo"><p><strong><a href=”index.html”>Your site's Name</a></strong></p></div>

Note that there's a link back to the home page in the above code, which is a handy feature for mobile device users. However, you'll want to leave the link coding off on the home page:

      <div id="logo"><p><strong>Your Site's Name</strong></p></div>

Navigation

Since mobile device users may not be able to use a mouse or other pointing device, they may benefit from having access to a special table of contents or other supplementary navigation. However, you may not feel the need to provide these features to "screen media" users. Here's where you would use the .handheldContent style from your screen.css document:

      <div class=”handheldContent”>

      <p><strong>Contents:</strong></p>

      . . .

      </div>

Since you may decide to suppress the complete site navigation from displaying on handheld devices on every page, I suggest that you add an additional link back to the home page so that these users would have an easier time moving around the site. A good place to add this link would be right above the footer on all of the pages on the site (except for the home page).

      <p class=”handheldContent”><strong><a href="index.html">Your site's Name</a></strong></p>

Tip: As you work, continue to check your pages using your emulators.

Reminder: when you're referring to a custom "ID" or "class" style within XHTML coding, leave off the pound sign (#) or dot (.) at the beginning of the name.