How to make a special CSS Stylesheet for print

zk0 · 11-19-2006, 08:59 AM

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.
????: NamePros.com http://www.namepros.com/webmaster-tutorials/259640-how-make-special-css-stylesheet-print.html
????: NamePros.com http://www.namepros.com/showthread.php?t=259640

Taken from: How to make a special CSS Stylesheet for print

Barrucadu · 11-19-2006, 11:57 AM

Thanks, I was wondering how to have a print stylesheet.

I would give rep but...

Quote:

We're glad that you're fond of this member, but please give some rep points to some other members before giving it to zk0 again.

lol

zk0 · 11-19-2006, 01:44 PM

Originally Posted by Mikor

Thanks, I was wondering how to have a print stylesheet.

I would give rep but...

lol

Haha thats funny. Thank you

DylanButler · 11-19-2006, 09:15 PM

The key here is the media attribute on the link tag.

<link rel="stylesheet" type="text/css" href="printstyle.css" media="print" />
????: NamePros.com http://www.namepros.com/showthread.php?t=259640

You use the media attribute to specify what styles a specific media will receive.

Media types:
* screen (the default), for non-paged computer screens;
* tty, for fixed-pitch character grid displays (such as the display used by Lynx);
* tv, for television-type devices with low resolution and limited scrollability;
* projection, for projectors;
* handheld, for handheld devices (characterized by a small display and limited bandwidth);
* print, for output to a printer;
* braille, for braille tactile feedback devices;
* aural, for speech synthesizers;
* all, for all devices.

YesBrilliant · 02-17-2007, 04:09 PM

Originally Posted by Mikor

Thanks, I was wondering how to have a print stylesheet.

The same here.

Thanks for sharing.

travel abroad

11-19-2006, 08:59 AM	THREAD STARTER #1 (permalink)
zk0 NamePros Member Join Date: Jun 2005 Posts: 163	How to make a special CSS Stylesheet for print 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. ????: NamePros.com http://www.namepros.com/webmaster-tutorials/259640-how-make-special-css-stylesheet-print.html ????: NamePros.com http://www.namepros.com/showthread.php?t=259640 Taken from: How to make a special CSS Stylesheet for print __________________ Green Blog and Green Web Hosts. AdBrite Forum and Webmasters Blog.

11-19-2006, 09:15 PM	#4 (permalink)
DylanButler NamePros Regular Join Date: Jan 2006 Location: San Diego, CA Posts: 734	The key here is the media attribute on the link tag. <link rel="stylesheet" type="text/css" href="printstyle.css" media="print" /> ????: NamePros.com http://www.namepros.com/showthread.php?t=259640 You use the media attribute to specify what styles a specific media will receive. Media types: * screen (the default), for non-paged computer screens; * tty, for fixed-pitch character grid displays (such as the display used by Lynx); * tv, for television-type devices with low resolution and limited scrollability; * projection, for projectors; * handheld, for handheld devices (characterized by a small display and limited bandwidth); * print, for output to a printer; * braille, for braille tactile feedback devices; * aural, for speech synthesizers; * all, for all devices. __________________ -Dylan Butler EXAMP - San Diego Web Design

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)