The Style Rendering toolbar in Dreamweaver 8 will be our guide for viewing the various media types used here. The link attachment in our page will tell the tool which style sheet to use to render the content appropriately. Therefore, we will have three link attachments in the page we create, one for each stylesheet to which it is attached. Our finished link code will look like this:
<style type="text/css" media="screen">
<!--
@import url("screen.css");
-->
</style>
<style type="text/css" media="print">
<!--
@import url("print.css");
-->
</style>
<style type="text/css" media="handheld">
<!--
@import url("handheld.css");
-->
</style>
Sounds pretty easy, yes? Let’s do it. Oh, if you’re wondering why I used the “import” method rather than the “link” method, it’s because IE5 for the Mac doesn’t understand import and by doing it this way, I have eliminated a defunct browser.
Unzip the file included with this article into a folder on your computer. You will find both an unstyled page and a finished page which I have included for purposes of comparison. Open the unstyled page, candy.html, and let’s get started. The page looks pretty bad, huh? I love starting with raw content and then watching the “magic” as rule after rule of CSS is applied. So here we go.