In this video we will show you the process for creating a style sheet for printing in Dreamweaver.

A template has been used to build this website. However, this template includes elements that aren't necessary when a webpage is printed onto paper. The style sheet we'll create will be applied when someone wants to print a page of this website.

Let's start by previewing this page in a browser to see how this style sheet currently works with this website.

With the page open in your browser, right-click and select Print Preview...

In the print preview, you can see that the website is presented as three columns with the navigation bar visible. Since navigation bars do not work on paper, our style sheet will remove this element for printing purposes. We'll also have the style sheet change the layout to a single column.

The reporterstyle.css file is the current style sheet used for this website, and it is set to the default "screen" media type.

We'll make a new style sheet called reporterprintstyle.css, which will be used for printing. Start by right-clicking the reporterstyle.css file in the Files panel, and selecting Edit > Duplicate.

Name this duplicate file as "reporterprint.css."

Now we'll edit this new CSS file so that it is applied only for printing. Double-click the 3ColumnTemplate file in the Files panel to open it.

Next, use the Attach Style Sheet button in the CSS Styles panel to attach reporterprint.css to the template.

Once you've selected the style sheet file to attach, be sure to set the Media dropdown to "print", so that this style sheet is only applied at printing time. Click OK once you are finished.

From here, switch to Code view.

Here you can see that two style sheets are now linked. One style sheet controls display in a web browser, and the second controls printing.

Now we'll make the change to reporterprint.css that removes the navigation bar. Under the tab for the 3ColumnTemplate.dwt file, click the reporterprint.css name.

With reporterprint.css code visible, locate the #wrapper #navbar section, and add a line that sets visibility to "hidden".

Next, move to the style code for columns l, c, and r, and set their widths to 940 so that they span the width of a printed page. This will also force them to print in the order left, center, and right.

Now, save all of your files.

From here, preview the template in a browser.

You'll see that the template displays as it always has. Now right-click the page and select Print Preview...

From the print preview you can see your new style sheet at work. The navigation bar is gone, and the text spans the page. You have successfully used Dreamweaver to create a style sheet for printing purposes.