Step 6: Add your new style sheet to your pages

Now that your new "handheld media" style sheet is ready for use, you can add it to the <head> section of each of the pages on your site. If you've also created a new external "screen media" style sheet, you can put it in place as well.

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en-US" xml:lang="en-US" xmlns ="http://www.w3.org/1999/xhtml">

<head>

. . .

<link rel="stylesheet" media="screen" type="text/css" href="screen.css" />

<link rel="stylesheet" media="handheld" type="text/css” href="handheld.css" />

</head>

---

Note: If you already have a link to a "screen media" style sheet in your pages, you'll need to add the media=”screen” attribute and value pair so that the user's browser will know which style sheet it should load for "screen media" users. If you don't specify the media, the default setting of "all" may be used. That may result in the browser ignoring the "handheld media" style sheet, even when a mobile device user is viewing your pages.

Tip: you can use global search and replace to add the link to the new style sheet code to all of your pages at once. This works in non-WYSIWYG text editors, such as HomeSite and BBEdit. There's a similar feature in Dreamweaver, too.