Creating a Cascading Style Sheet Print Page

Today’s web sites implore many different aspects including standards-compliant markup, advanced CSS techniques, and mobile functionality. Often times the need for printer - friendliness is misplaced, although it’s a must. If you design your site with HTML 5 and CSS, designing a separate print style sheet is relatively easy. In this article I’ll show you how to make your web site look great visually and produce great-looking print output as well.

See Demo

Download Project Files
Zip

Analysis

Before we dig in let’s examine some key issues to consider when dealing with printed material:

Graphics

One of the fundamental features of web design; without graphics, web sites simply do not hold viewer interest. The problem is that when working with printed material, graphics tend to use a lot of color, be rather large (both in file size and on the page), and generally the look does not translate well to print output. People often do not want to waste their color ink cartridges just to print your web graphics. If you must have graphics in the print output, it’s advisable limiting your graphics to the bare minimum.

Color

It’s pretty much mandatory for your web site, and the appropriate use of color is what makes a web site distinctive. But again, in the print world color ink is expensive and you shouldn’t assume visitors want a color copy of your web site. Best practice would always advise to stick with black and white as a default; this works best for most standard desktop printers.

Navigation

It’s essential to have consistent, easy to use navigation on your website.  Using a clean, practical and common sense approach to the organization and tools that drive your navigation will ensure your users will find pertinent information quickly and easily.  These navigational tools can range from horizontal or vertical drop down menu’s created with JavaScript, CSS or a combination of both to simple textual links that are styled with CSS. However, displaying the navigational tools that drive your website is not important when printing the page. If visitors are printing your web page it is because they want to reference your content, not your navigation. As a web developer, the path to the page they printed is always placed at the bottom of the print out. This way, if changes are required, you can use this as a reference to the location of the page on the website.

Fonts & Sizes

Though font families and sizes are determined by the browser’s default style sheet and settings, default settings tend to be Times New Roman and 12 pixels. It is to some degree, hit and miss depending on browser specific settings determined by the user.  With this said, when working with font families and sizes on the web, it is recommended you use Arial, Times New Roman or Verdana and relative font sizes, such as em, % or px.  When dealing with printed web pages, it is recommended you use physical or absolute font sizes such as pt, inch, and cm. We will be working with pt in this article.

Relative vs. Physical (Absolute) Font Sizes

Relative font sizes means that a visitor can adjust font settings in their browser to suit their preference. Some visitors, including the elderly might need a larger font size setting whereas younger audiences might want a smaller font size than originally specified by the web developer. Absolute font sizes are fixed in nature. This is why they are used in print.  Leaving your users without the option of adjusting font sizes is not the best strategy, especially in terms of accessibility.

The Page

The best way to demonstrate how to make a printed style sheet is to use the layout from Creating a CSS Layout. Let’s see how you can convert this page to hard-copy format. Take a look at the finished web version of our page here:

Index Finished

Let’s define some goals for the conversion process:

1).We need to remove the:

In our case, the list above ought to cover what we need to do, so let’s get started.

Open the File

Open up your favorite text editor and open the file index.html and have a look at the following mark-up:

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

In order to make a website printer friendly, we need to add a reference to a print only style sheet, and apply a different value for the media attribute. Save your work.

Print preview in browsers

Open index.html, it should look fine in a web browser on a computer screen:

Print preview

When printing a web page without a print style sheet, normally its not too attractive. Let’s start working with our print style sheet.

Setting a base font family and color

Open print.css and set a base font family and color for our print style sheet as shown below:

body
{
font-family:'Times New Roman';
color:#000;
}

As you can see from the code above:

Save your work. Results should be as illustrated.

Body

Hiding the logo

You will notice in our HTML markup, we have an image that signifies our logo. However, when viewing this page using our print style sheet, it’s too prominent, and doesn’t belong. We need to remove the logo from our print style sheet with the following CSS rule as shown below:

img.noprint
{
display:none;
}

As you can see from the rule above, we:

We do this because our image tag in our HTML has a class attribute with the same name. Save your work. Results should be as illustrated.

Logo

Hiding navigation

Since the side bar has a logical <nav> selector in HTML, we can easily manipulate this in our print style sheet to hide it as shown below:

nav
{
display:none;
}

As you can see from the code above:

Save your work. Results should be as illustrated.

Navigation

Difference between display and visibility

You might have noticed we used display instead of visibility. The difference between display and visibility is the former will hide the element visually from displaying and removes the physical space the element occupied. Visibility on the other hand, will hide the element visually from displaying; however, it will preserve the physical space the element occupied.

Adjusting heading two and three tags

In order for us to retain a title that’s prominent on each web page, we just adjust the font size on our heading two and three tags respective to each other. Also, we give it a different font family than our web style sheet, and set the default color to black. We do all of this with these rules as shown below:

h2
{
font-size:16pt;
}
h3
{
font-size:13pt;
}

Save your work. Results should be as illustrated.

Heading

Copyright

Our copyright is lacking. Since we can’t use colors, let’s bring visual significance to the copyright through another means as shown below:

footer p
{
font-size:10pt;
font-style:italic;
}

As you can see from the code above:

Save your work. Results should be as illustrated.

Copyright

Summary

As you can see, converting a web site to a printer friendly version is not difficult. Now you know how to:

Now your pages will slide out of your printer looking as they’re supposed to look!

If you have questions, contact me.