Quick Tip: Creating Separate Stylesheets for Screen and Print Media

The CSS specification allows you to create different stylesheet for different types of media. What will work on a screen when being viewed in a browser may not produce exactly what you expect when printed out on a laser printer. So, how do you create separate stylesheets for separate media in GoLive? Well, in fact, its quite easy. Of course, screen and print are not the only media types you might want to create separate stylesheets for. If you want to see the full range of supported media types for CSS2, check out the specification: http://www.w3.org/TR/REC-CSS2/media.html


Step 1:
Open the CSS Editor by clicking on the CSS Editor icon in the document window.


Open the CSS Editor

Step 2:
Create at least one CSS rule for your first stylesheet. This ensures that GoLive writes the style HTML element into your page's source code, and its that which we will be copying in the next step. If you do not see the Folder appear in the CSS Editor, Ctrl/right-click inside the editor window and choose Folder for sections from the View options.


Create a Rule

Step 3:
Open the head section of the page and select the CSS icon.


Select CSS Icon in Head Section

Step 4:
Now Ctrl-drag the icon to the right to create a copy. If you still have the CSS Editor open, you will see a section appear for the new style HTML element which has just been written into the source code of your page. If you do not have the CSS Editor open, you will see the new section when you open it again.


Duplicate the Stylesheet

Step 5:
Select the folder for the first internal style element and check the Inspector. You will see that the media attribute is set to screen. The copy will have the same media attribute. You can change either to "print" in the Media text entry box by highlighting the existing text and typing over it.


Set the Media Type


The same process with external stylesheets is even easier. Just create the external stylesheets in the CSS editor as normal. In the CSS editor highlight the external sheet and give it a media type in the Inspector.