How to Create a Print-friendly CSS for Your Website

Printing Image

When your website’s contents provide useful information and value to users, chances are people are going to print your webpage. Printing is still one of popular ways for people to receive and share information from the Internet. Therefore print friendly CSS is very important when talking about printing the webpage. It is designed to make a good-looking print on paper and provide a good user experience. You can see the step by step instruction on creating print-friendly CSS In the following.

1. Setting Up a Print Stylesheet

To make your website look great when it is printed, first you need to define a print stylesheet. You can create a print stylesheet just like a regular stylesheet, except it is only used when the webpage is printed and specify it using the media="print" attribute. Here is an example:

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

In above example, print.css is the print stylesheet, and the media="print" command means that this CSS file is only called up when webpage is printed.

2. Writing the CSS Rules

The CSS rules in the print stylesheet will override the CSS rules in the main stylesheet. Therefore the rules you need to put in the print stylesheet are ones to override in the main stylesheet.

2.1 Remove Unwanted Elements

The first thing in writing CSS rules for printing is to think of the certain elements that people would not be preferred when printing. You need to hide them. Here are those some common elements including ads, header, navigation button, form and sidebar. You can hide these items by adding CSS rule for its class display: none or you can simply add class="noprint" to each of those elements in the HTML.


.header, .nav, .noprint { display: none; }

In this example, header, navigation and noprint elements will not be displayed in printing. You can test it by using print preview feature in the web browser to how your webpage look like when it is printed.

2.2 Set Fixed Font Size

Printers use points and not pixels. To render fonts properly, you should set font size in points to produce the best looking printed text.


body{ font-size: 12pt; }
h1 { font-size: 22pt; }
h2 { font-size: 18pt; }
h3 { font-size: 15pt; }

2.3 Links

Links is not clickable on paper and they will become useless if we do nothing. You can add few lines of the following CSS rules, the links will be useful on paper.


a { color:#000000; text-decoration: underline; }
a:after { content: "("attr(href)")"; }

In above example, the style will make all links are in black color and underlined, and add the URL of the links in brackets afterwards. Therefore, the readers can see the URL of the links and able to visit the web address.

2.4 Layout

Margin and spacing are important to the make the print look good. You can add word spacing and line height and some paddings to make it easier to read.


body { padding: 12%; word-spacing: 1px; line-height: 1.2; }

Print-Friendly CSS Websites

Here is a list of well optimized websites for print-friendly.


Smashing Magazine is one of the popular website where you can find and read quality contents about tips, tricks, ideas and techniques on web design and development.

SmashingMagazine Image


A useful website where you can explore the design, development, and meaning of web content, with a special focus on web standards and best practices. A List Apart launched 1998.

A List Apart Image


CSS-Tricks launched in 2007. CSS-Tricks has come to become a site about all things web design and development. You can read and learn from very useful tips, tricks, techniques and guide about CSS style. Image