info To participate please Register or Login.

How to make a special CSS Stylesheet for print

By Simon on November 18th, 2006. Published in CSS.

In my article yesterday, when I talked about how important the text on your website or blog is I mentioned that it is a good idea to have different stylesheets depending on if your user wants to print out the text or just read it on his screen. In this post I will show you how you make a special CSS Stylesheet for your users when they print out your homepage. It isn’t hard, in fact it is really easy!

Your HTML code (header) might look something like this:
(Please note that I have inserted a space between the “< " and the first letter in the code!)

< html>
< head>
< title>Name of page< /title>
< meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
< link href="style.css" rel="stylesheet" type="text/css"/>
< /head>
< body>

Here you can see your link to your ordinary CSS stylesheet (marked in bold). Now if we want to add a CSS Stylesheet that takes over when your user press on print you must add this little code under the ordinary CSS link code:

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

It should look something like this (the code marked in bold is the code you just inserted):

< html>
< head>
< title>Labbportalen
< meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
< link href="style.css" rel="stylesheet" type="text/css"/>
< link rel="stylesheet" type="text/css" href="printstyle.css" media="print"/>
< /head>
< body>

Now that is fixed! Now you just need to your “printstyle.css” file. Here is an example on how it could look like:

p {
font-family:"Times New Roman", Georgia, serif;
font-size:12pt;
}

img {
display:none;
}

#content {width:100%;}

Your font should be in a serif like Times New Roman. The font size should be set to “pt” and not “px” or “em”. Pt looks best when you print out your text. “Em” and “px” is best when reading on your screen. The “img” tag on this example takes away all the images on your site.

money Earn $7.50 by making a review about this post on your own blog. Click here for more information!

4 Responses

Express yourself. Tell us your opinion. Make a comment!

  • its been my experience that you have to set the media for the original CSS file for media=”screen” otherwise you will have to try to override all your styles (at least for some browsers)

    django forums said on November 19th, 2006 at 2:15 pm

  • django; It’s a good idea to set the media to screen aswell. But it is not nessesary with todays modern browsers. But as always, it’s better to be prepared for the worst.

    SantaX said on November 19th, 2006 at 4:54 pm

  • Use HTML entities so you don’t have to have spaces in the HTML you’ve shown. > and <

    kiddar! said on November 19th, 2006 at 5:22 pm

  • Great idea, to be frank its easier and more approachable to execute.

    Thanks.

    Robert said on December 15th, 2006 at 1:19 pm

    • Write your comment

    Warning Spam and inflammatory comments will be deleted. If this is the first time you make a comment on Easy Webbers it will be held for moderation before being published.