Is there a way to use the same CSS stylesheet for print media and the default layout?

Question

I am looking for a way to use the same stylesheet for print media as for the default onscreen layout. The advantage to me will be that I won't have to update 2 files every time I update the CSS. I would prefer to have one stylesheet and specify special rules for print media by denoting them somehow… It may not be possible, but I thought I'd put the question out there.

Thanks.
Mike

Answer 1

There's this syntax, although I honestly don't know if it's supported across all browsers (it should be):

@media print {
    body {
        background: #fff;
        color: #000;
    }
    /* etc */
}

See the media part of the CSS2 standard at W3.

Answer 2

If you want the styles to be the same across all media, just define the common styles in the stylesheet as normal (i.e. not in any media rule) then put the media specific elements in the relevant rules.

If you want some styles to apply to a subset of media, you can do it like this:

@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}

Here's a link to the relevant W3C page