Tips and Tricks

How to Print a specific Part of a HTML Page using CSS (@media:screen,@media:print)

Build Online Forms for your Web Site

Arclab® Web Form Builder the HTML form creation software for Windows PC to create email contact forms and php forms with ease. Build HTML forms on your PC and upload the forms to your own web site.

Learn more

The user can click on a link or button in the HTML page or form, e.g. add the following HTML code:
<a href="javascript:window.print()">Print</a>

 

The problem is, that the print command will print the whole page, which might not be useable.
The solution is to define 2 different CSS styles for the screen and the printer, so that unwanted parts of the page will be hidden when printing.

 

How it works:

The following sample should illustrate how easy it works!
The page contains 3 parts: header, middle and footer and only the middle part should be printed.

 

First we need to define the parts, this can be done using e.g. <div> tags.

...
<div class="noprint">
page header
</div>

...

this part of the page contains the part we want to print, e.g. the form

...
<div class="noprint">
page footer
</div>
...

 

Now lets define the CSS code

The specific CSS code can be defined directly in the HTML header or using a stylesheet file.

<html>
<head>
...
<style type="text/css">
<!--

@media print
{
.noprint {display:none;}
}

@media screen
{
...
}

-->
</style>
...
</head>
...

The code above contains the code if you want to add the CSS code directly to the HTML header. The class definition noprint sets display:none, so the  content will be hidden when printing the page. Its also possible to use a <span>, <p> or <table> tag instead of <div>. Using ID will work the same way.

 

Thats all. An alternative would be to use 2 different CSS files (see below)

 


 

The following code shows how to use 2 different CSS files: one for the screen and one for the printer

The usage is quite simple, make a copy of your CSS file and remove all the unwanted parts using display:none; in the "style-print.css".

...
<head>
...
<link rel="stylesheet" href="style-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="style-print.css" type="text/css" media="print">
...
</head>
...