How to create print-friendly webpages with CSS.

This time, I’ll be explaining the printing possibilities of CSS.

Most people visiting this blog are familiar with what CSS can do. Structuring and modeling webpages. But CSS has more possibilities. You can for example, define which stylesheet works on which device. Those can be referred to by the ‘media’ attribute.

When you use an external CSS stylesheet in your webpages, you use the <style> tag. This tag has more options that only refer to the stylesheet you use on that page. You might not have used the <media> attribute yet, because it is set standard to ’screen’.

So, standard for media is ’screen’, when you visit a webpage you’ll see the screen.css stylesheet. When you click the file>print button, the webpage will be printed in the print.css style.

You can refer to this different stylesheets by the following codes in your tags.

<link rel="stylesheet" type="text/css" href="path/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="path/print.css" media="print" />

Is there a problem with this technique?

There isn’t a problem yet, but you should know what to do. As you could have thought of, the only thing that will change is the CSS, not the HTML. The structure of the webpage will stay the same, so are the id’s and classes. You have to define all those id’s and classes in the different CSS files in the same way.

Example:

In your screen.css stylesheet..

#content{
width:300px;
height:400px;
background-color:#333333;
margin:4px;
padding:5px;
font-size:13px;
font-color:#ffffff;
}

Your print.css stylesheet..

#content{
width:300px;
height:400px;
font-size:13px;
font-color: #000000;
}

As you can see, the general structure remains the same. All the backgrounds are removed in the print.css stylesheet, and text colors have to be readable in a printed version.

You could have, for example, advertisements or links on your webpage. You might not want them to display on the printed page, but you can’t change the HTML of the page. There’s a simple trick for not displaying HTML.

When a div has id ‘ads’, you can make sure nothing is displayed from inside that div, by adding this code in your print.css file.

#ads{
display:none;
}

This line will make sure nothing is shown.

One simple tip, if you use links that doesn’t have an underline, only when hovered, make sure you change this in prints. It’s handy for people to see where the link suppose to be.

That’s it! Thanks for reading.