Creating Style Sheets for Handhelds

You can create an entirely independent style sheet that will only be used for your Web page when it is viewed in a telephone, PDA or other handheld device.

To create a style sheet for handhelds:

1.	In the head section of your XHTML document, type <link rel="stylesheet" type="text/css" href="url.css", where url.css is the location of the handheld style sheet on the server.
2.	Next, type media="handheld" to indicate that this style sheet be used only for small screen devices.
3.	Close the link tag with />.
4.	If desired, in the link tag for your main style sheet, type media="screen" so that the styles you've set up for regular screens are not used for handheld browsers.

Tips

• The default value for media is all. So, unless you limit your main CSS document to the screen, it will be used in addition to your handheld CSS rules. (In this case, the style sheet that is called later overrules any earlier ones.) For more details, see page 133 in Chapter 8, Working with Style Sheet Files.

• In the examples for the rest of this chapter, we'll be creating a separate and independent style sheet that does not use or depend on the main style sheet.

• Not all handheld browsers respect the media attribute, and will erroneously read screen style sheets. Some do better with @import rules (see page 132).

Figure 13.6. Add the screen value to your regular style sheets so that their properties are not applied to your handheld style sheet.

Figure 13.7. Here's what our example looks like when pointed to a blank handheld style sheet. This document produced an error when it overloaded on the image files at the end of the document. We'll hide them on the next page.