This section will teach you to create a print style sheet. In order to impart a good look and feel to the web page, you will need to add styles that will help in removal of unwanted page elements and backgrounds, format text, and add a printable logo and also print the URLs attached to any links on the web page.

Remove unneeded page elements

Firstly, you need to understand how the page is laid out so that you can decide which elements you want to be printed:

1. Launch web browser

In case your web page contains main content, navigation links, new links, printed subscribes and Contact links, and printed style sheet should hide all these parts of the page.

2. Create new file named print.css

In the text editor; create a new file named print.css. In the new print style sheet, the first order of business is to hide the navigation bar and also other parts pf the web page that you don’t want to print.

3. Create new properties

Using the display property, create a new group selector that hides site tools, navigation bar and new sidebars, like:

#sitetools, #nav, #new {
        display: none;
}

When the display property is set to none, web browsers hide those elements so they would not print. But initially you need to attach this external style sheet to the web pages so that browsers can find it.

Removing backgrounds and adjusting layout

Mostly, background images and colors print out, but often they also don’t get printed. Although it all depends on the browser and visitor’s setting, yet some browsers fail to print background elements at all. Printing backgrounds is very important as it becomes essential for printed page to look just like the screen version.

You can return to the text editor and print.css file. You can add two new styles to remove the background color and banner.

body {
    background: #fff;
}

#banner {
    background: #fff;
}

When viewed on screen, the web page also has a gray background and a graphic that creates a drop shadow effect to the left and right edges of the content. The banner also holds a graphic that includes the logo of the site. These two styles set the background color of the page and banner to white and remove the graphic.

Now you need to adjust the layout so that the text fills an entire printed page. Start by changing the #wrapper ID style, which sets the entire width of the content area of the page to a perfect 760 pixels.

Add another style to the print.css style sheet

Your next style would include adding another style to the print.css style sheet.

#wrapper {
	background: #FFF;
	border-style: none;
	width: auto;
}

The first declaration in this step acts just like the previous steps. It sets the background to white color and also removes all background images. The second property, however, removes the black border that appears on both the left and right edges of the wrapper. The last declaration – width:auto – affects the complete layout of the page. However, it overrides the 760-pixel width setting from the global.css file and leaves the exact width up to the Web browsers. Auto simply allows the <div> fill to enter available width, so no matter whatever be the paper size – letter A4, or something else – the content fills the width of the printed page.

Add newer styles to print.css files

#main {
    border: none;
    padding: 0;
    width: auto;
}

The first two properties eliminate the borders and the extra white space visible in the onscreen version of the page. The third declaration allows the text to fill the width of the page, just like the width:auto setting you added for the #wrapper in step2.

Add a copyright region of the page:

#legal {
    padding-left: 0px;
}

You can feel free to save this file and use the Print Preview function to see how the printed version would look like.