Add a Print Button or Link to Your Web Page

Add a Print Button or Link to Your Web Page 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 browsers 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. Heres 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: onclickwindow.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 Its 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: 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: typetext/css mediaprint / 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.