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.
In early 1996, Nancy Gill picked up her first book on HTML and permanently said goodbye to the legal field. She has been busy ever since developing web sites for businesses, organizations and social groups in Central California and occasionally beyond. Nancy has served as a member of Team Macromedia since late 2001, first with UltraDev and then moving to Dreamweaver when the programs were consolidated in 2002. She also serves as Assistant Manager for the Central California Macromedia User's Group.