How to Add a Print Button or Link to Your Web Page

A print button or link is a simple addition to a web page

Printer icon on white round vector button
Printer icon on white round vector button. bubaone/Getty Images

CSS (cascading style sheets) give you considerable control over how content on your web pages is displayed on the screen. This control extends to other media as well, such as when the web page is printed.

You may be wondering why you would want to add a print feature to your web page; after all, most people already know or can easily figure out how to print a web page using their browser's menus.

But there are situations where adding a print button or link to a page will not only make the process easier for your users when they need to print out a page, ​but, perhaps even more importantly, give you more control over how those printouts will appear on paper.​

Here's how to add either print buttons or a print links on your pages, and how to define which pieces of your page content will be printed and which will not.

Adding a Print Button

You can easily add a print button to your web page by adding the following code to your HTML document where you want the button to appear:

onclick="window.print();return false;" />

The button will be labeled as Print this page when it appears on the web page. You can customize this text to whatever you like by changing the text between the quotation marks following value= in the code above.

Note that there is a single blank space preceding the text and following it; this improves the appearance of the button by inserting some space between the ends of the text and the edges of the button displayed.

Adding a Print Link

It's even easier to add a simple print link to your web page. Just insert the following code in your HTML document where you want the link to appear:

print

You can customize the link text by changing "print" to whatever you choose.

Making Specific Sections Printable

You can set up the ability for users to print specific parts of your web page using a print button or link. You can do this by adding a print.css file to your site, calling it in the head of your HTML document and then defining those sections you want to make easily printable by defining a class.

 

First, add the following code to the head section of your HTML document:

type="text/css" media="print" />

Next, create a file named print.css. In this file, add the following code:

body {visibility:hidden;}
.print {visibility:visible;}

This code defines all elements in the body as hidden when being printed unless the element has the "print" class assigned to it.

Now, all you need to do is to assign the "print" class to the elements of your web page that you want to be printable. For example, to make a section defined in a div element printable, you would use

Anything else on the page that is not assigned to this class will not print.