浏览器控制的打印样式表文本

Question

Is there an easy way to overwrite all text/header styles to let the browser handle the text formatting in the print stylesheet?

Edit: I have lots of styles such as

#id .class .class #id .class p{}

Answer 1

Make sure that any styles you have applied to the text / header which you do not want applied during "print" mode are specified as;

@media screen {
  .headerStyle { color: green; }
}

They will then be ignored during the @print screen mode.

Answer 2

No. You can only cascade downwards, and you can't refer to other styles. Limit the CSS you have to the media types you want in the first place.

Answer 3

I have learnt that any CSS formatting created in a stylesheet specified as screen does means that the printing page will be unformatted.

In my example, I can't touch the HTML and the CSS media has not been specified, so the problem remains, but you should always make sure you set this to avoid problems in other medias.

Set the CSS globally (including print)

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

Set the CSS just for screen (excludes any media, including print format)

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