How to Create a Printed Web Layout Using Print Stylesheet

Posted on: July 31, 2010

Briefly we could say that

Printed Web Layout is a design when the page is printed or in a print preview

And Print Stylesheet itself is a stylesheet which is used to this special purpose.

To implement this you could just simply put the stylesheet link on the header (like the usual stylesheets), but in addition to that you should set the media parameter to print, for example:

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

And inside the print stylesheet there are some points to consider, which are:

1. The unwanted elements, you should hide this for good, for example:


display: none !important;


2. The Showing Content, for example you could extend the width and remove margins and the floating elements style:


width: 100%;

margin: 0;

float: none !important;



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s


Blog Stats

  • 510 hits
%d bloggers like this: