Separate CSS file for printable styles!

I used this recently in an app I was building for work and it works like a charm!

Synopsis:  you create a separate css file (I copied my main one as a starting point) and then modify it in several key ways to remove colours, hide things that you don’t want printed (headers maybe, navigational controls, stuff like that), etc. etc.  Then you add a second <link> tag to your page(s) that you want printable, with a media=”print” attribute.  Try print preview on your updated page and see your handywork!  🙂

As an added bonus you could add a “print this page” type of button that brings up the print dialog.  You probably already know how but just a refresher:

<input type=”button” class=”myButtonClass” name=”printMe” onclick=”window.print();” value=”Print this Summary” />


0 Responses to “Separate CSS file for printable styles!”

  1. Leave a Comment

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

Scott’s recent tweets…


%d bloggers like this: