Web Design Tips From HTML Made Easy

dog portraits

How To Make A Print This Webpage Link

Ever wonder how to make a link for printing a webpage? Wonder no more, it's as simple as adding a little javascript to the link like so:

<a href="#" onclick="window.print();return false;">Print this page</a>

When the viewer clicks the link it will activate the printer dialog box so the viewer can print the webpage. However it will print the entire webpage, navigation bar, ads and all. Wouldn't it be nice if you can control which part of the webpage will print? It just so happens that you can with some CSS. Here's how:

Open any text editor such as Notepad and write this:

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

Save the file as print.css and upload it to where you keep your webpages. Next open the webpage and link to the file you just made by adding the following code between the <head></head> tags:

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

One last step is to add class="print" to the HTML tag which contains the section of the page you want to print such as the div tag for main content, example:

<div id="content" class="print">

That's it, when folks click the "Print this page" link only the content within that tag will print, stuff outside of that tag won't. Cool, wouldn't you agree? Yeah I thought you would.

ComboInk Free Shipping for Order over $50

© 2015 HTML Made Easy | Privacy Statement