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:
HTML 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. 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:
HTML 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 Code:
<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:
Code:
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.
Taken from:
How to make a special CSS Stylesheet for print
