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

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

We are searching data for your request:

Forums and discussions:
Manuals and reference books:
Data from registers:
Wait the end of the search in all databases.
Upon completion, a link will appear to access the found materials.

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 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 into your HTML document where you want the link to appear:


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.


  1. Kanos

    You are a very talented person

  2. Doll

    I think, that you commit an error. I can prove it. Write to me in PM, we will talk.

  3. Reese

    Bravo, you were not mistaken :)

  4. Sheehan

    Indeed and as I did not guess earlier

  5. Rolf

    Complete bad taste

Write a message

Video, Sitemap-Video, Sitemap-Videos