Click here to Skip to main content
11,928,078 members (51,791 online)
Click here to Skip to main content
Add your own
alternative version


107 bookmarked

Printing with Style

, 23 Sep 2003
Rate this:
Please Sign up or sign in to vote.
Make your web pages printer-friendly.


There're a lot of techniques used on the net to create nice looking prints from web pages. Some take a copy of the pages and remove unwanted elements manually, some do it by opening a new print-friendly page using a server side script (ASP, PHP, Perl, ...). I prefer doing it with style Smile | :)


Doing it with style is simple and elegant; you create a separate style sheet with elements suited for print:

  • Set the background to white (background:#ffffff;)
  • Underline links (text-decoration:underline), and maybe color them blue for users with a color printer
  • Hide unwanted parts using display:none;

You attach the style sheet using:

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

media="print" (IE 4+, Netscape 6+ and Opera 3.62+) tells the browser to use this only when you print the page.

This is how I attach my print.css.

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

You can test it by printing one of my pages, if you print my Links page you'll also see how I append external links (IE 6+ only):

body { 
    color : #000000; 
    background : #ffffff; 
    font-family : verdana,arial,sans-serif;
    font-size : 12pt;  
h2 {
    font-size : 14pt;
a { 
    text-decoration : underline; 
    color : #0000ff; 

#logo,#head,#menu,#tail,#printicon, {
    display : none;

#appendedlinks {
    page-break-before: always 

Append external links

A nice feature is to append all external links in the webpage, to the print document. This is implemented on my pages using the following JavaScript:

// IE only: attach eventhandlers.
// They trigger when a user  prints a web page; 
//     From File->Print, File->Print Preview or
//     by executing a window.print() command 

function beforePrint() {

function afterPrint() {

// Generic print function, called from the web page
function printContent() {
    if (window.print) {
    } else {
        alert("your browser doesn't support this function")

// When appending links to the document, do not 
// append links pointing to the following domains / sites

var excludedomains=["", "","localhost"]
var excludedomains=excludedomains.join("|")
rexcludedomains=new RegExp(excludedomains, "i")

// appendlinks(id)
// id = id of the part of the web page you want to extract links from
//      ex: document.body

function appendlinks(id){
    var strD = "<p/>";
    var num = 0;
    if (document.getElementById){
        var links=id.getElementsByTagName("A")    
        var total=links.length
        strD += "<dl id=\"appendedlinks\" border=0>"
        strD += "<dt><h2>Links extracted from the document:</h2></dt>"
        for (i=0;i<total;i++){
            if (links[i] 
                && links[i].href.indexOf("http:")!=-1) {
                strD += '<dt>'+links[i].innerText+'</dt>'
                strD += '<dd>'+links[i]+'</dd>'
        strD += "</dl>"

        if (id.insertAdjacentHTML && num>0)

// removelinks(id)
// After the print job is done, remove the appended links from the document
// id = appendedlinks
function removelinks(id) {
    if (document.getElementById){

Have fun coding (and printing).


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Per S
Web Developer
Norway Norway
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralIs it possible to define print preferences in window.print() Pin
codrakon17-Mar-06 3:52
membercodrakon17-Mar-06 3:52 
GeneralIE 6.0.2900.2180 Pin
Dregor18-Dec-05 1:36
memberDregor18-Dec-05 1:36 
Generala lot of great css ebooks in Pin
Anonymous12-Aug-05 1:36
sussAnonymous12-Aug-05 1:36 
GeneralPrintig defined area Pin
tauchert26-Apr-05 3:45
membertauchert26-Apr-05 3:45 
GeneralIt was very useful Pin
TanGkaK7-Apr-05 15:47
memberTanGkaK7-Apr-05 15:47 
Generalprint landscape &amp; page break w/ Style Pin
CZIU5-May-04 12:34
memberCZIU5-May-04 12:34 
GeneralRe: print landscape &amp; page break w/ Style Pin
Quetininha28-May-04 6:27
sussQuetininha28-May-04 6:27 
GeneralRe: print landscape &amp; page break w/ Style Pin
Anonymous29-Jul-04 11:35
sussAnonymous29-Jul-04 11:35 
GeneralRe: print landscape &amp; page break w/ Style Pin
mjjvol21-Sep-04 2:29
membermjjvol21-Sep-04 2:29 
GeneralPlease help me~ Pin
charcoalc5-May-04 1:50
membercharcoalc5-May-04 1:50 
GeneralRe: Please help me~ Pin
Anonymous24-Sep-04 8:14
sussAnonymous24-Sep-04 8:14 
GeneralPrinting with more Style Pin
Per Søderlind10-Mar-04 5:43
sussPer Søderlind10-Mar-04 5:43 
GeneralRe: Printing with more Style Pin
Per Søderlind10-Mar-04 5:49
sussPer Søderlind10-Mar-04 5:49 
GeneralPrinting without page headers Pin
krixerx1-Oct-03 21:24
memberkrixerx1-Oct-03 21:24 
GeneralRe: Printing without page headers Pin
Dheth2-Oct-03 4:42
memberDheth2-Oct-03 4:42 
GeneralRe: Printing without page headers Pin
Stephen Quattlebaum16-Oct-03 7:39
memberStephen Quattlebaum16-Oct-03 7:39 
GeneralRe: Printing without page headers Pin
Dheth16-Oct-03 21:46
memberDheth16-Oct-03 21:46 
GeneralRe: Printing without page headers Pin
Anonymous26-Aug-04 4:21
sussAnonymous26-Aug-04 4:21 
GeneralRe: Printing without page headers Pin
Anonymous3-Sep-04 10:44
sussAnonymous3-Sep-04 10:44 
GeneralRe: Printing without page headers Pin
In-Active6-Apr-05 10:09
memberIn-Active6-Apr-05 10:09 
GeneralVery useful Pin
John Cardinal23-Sep-03 16:36
memberJohn Cardinal23-Sep-03 16:36 
GeneralGreate! And, fun to se some one from Norway in here. Pin
Jonas Follesø18-Sep-03 10:48
memberJonas Follesø18-Sep-03 10:48 
GeneralRe: Greate! And, fun to se some one from Norway in here. Pin
Per Soderlind18-Sep-03 15:25
memberPer Soderlind18-Sep-03 15:25 
GeneralRe: Greate! And, fun to se some one from Norway in here. Pin
E.Data Studios24-Sep-03 14:54
memberE.Data Studios24-Sep-03 14:54 
GeneralWell Done Pin
Blake Coverett18-Sep-03 9:25
memberBlake Coverett18-Sep-03 9:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151126.1 | Last Updated 24 Sep 2003
Article Copyright 2003 by Per S
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid