How to Print

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

 

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>
...