"print" vs "screen" style sheets

what should be the contents of css styles sheets for printing

[benv]

Hi

Looking at those web sites using css2 for the complete layout of the pages, I see there is always a style sheet specifically for printing the pages included .

1st question : what should there be specifically in the print one compared with the media : all?

2nd question : should it be a <link rel ...> or an @import

Thanks for your answers. They help me a lot in my progression of css :-))

[benihana]

i generally use the print style to strip away everything except the content, i.e. set trhings like navigation, search forms etc to display:none; and also set the width of the content area to something that will print nicely on a4.

i think it has to be link rel as that is where you specify media=print

ta
ben

[benv]

Thanks a lot, benihana

I guess the images, the borders and other "graphic' elements should be omitted as well?

[benihana]

really depends on the content.

obviously if you have an image that illustrates an article, it would bewise to leave that in, but if its just decoration then you might as well get rid.

i think its a case of just trying a few things and see which gives the best/clearest printed reults. it maybe that setting the font to times or serif will also help, as these can be easier to read in print.

good luck

[TheDoctor]

There are a number of threads around on this topic. The most important thing, apart from what you've already mentioned is that the font size, which should be defined as em or % on the screen, should be defined as pt on the page.

Remember, though, the layout of the page doesn't have to correspond to the layount on the screen. That's the beauty of using CSS and separating content from presentation.

Start with a blank sheet, and decide afresh what has to go onto the printed page and where each element should go.

[createErrorMsg]

I would add a qualifier to The Doctor's comment, saying to be cautious about making print layout too radically different than the screen layout. Someone who prints your stuff is more likely to remember where it came from if it looks similar to the site they visited.

An even better solution is to include some identifier on the printed page with your URL and site name on it. You can set this element to display: none; in the screen version then bring it out in the print styles.

Also, remember that sans-serif fonts are best for on screen, but serif fonts are better for the printed page (it has to do with leading the eye on the page and reducing eye strain on the screen).

One last comment: any images set as backgrounds in your site will not print, no matter what you say in the print stylesheet.

[TheDoctor]

I would add a qualifier to The Doctor's comment, saying to be cautious about making print layout too radically different than the screen layout. Someone who prints your stuff is more likely to remember where it came from if it looks similar to the site they visited.

Certainly. That's one of the considerations you have to take into account when deciding where everything should go.

[drbrain]

It doesn't matter if you use a link element or include it via @import provided that the link media type is set to all and you provide the media type for the import. You can also use an @media section to add print styles for an all-in-one stylesheet:

Using link:

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

Using @media:

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

(in all.css)
@media print {
/* print styles */
}

Using @import:

<link rel="stylesheet" href="style.css" type="text/css" media="all">

(in style.css)
@import url(print.css) print;

[benv]

I read somewhere that <link rel..> made the browser download the style sheet anyway, whereas @media was better because it was downloaded only if necessary eg. when the user asks to print for the print sheet.

Any opinion on that?

Apart from that thanks everybody

[drbrain]

You have that backwards.

The browser may download only the stylesheets it needs using @import with a media type or the link element with an appropriate media attribute.

Setting print styles via @media means the style rules will be embedded in some other stylesheet. The only way to tell not to download a stylesheet with @media in it is ... to download it!

[Reflection]

I use link rel for my print style sheets simply to prevent FOUC :)

My main sheet and others are imports.