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{}
views:
32answers:
4
A:
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.
David Dorward
2010-06-24 14:52:23
I persoanly, thin this answer is a little cryptic and misleading.
thomasfedb
2010-06-24 14:53:26
@thomasfedb — Based on your answer, I think that is because you have misunderstood the question.
David Dorward
2010-06-24 15:05:00
Right you are David.
thomasfedb
2010-06-25 08:14:15
A:
Yes, simply create a print stylesheet.
A good tutorial on them is: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
thomasfedb
2010-06-24 14:52:27
Great. How does your print stylesheet say "Use the browser's default styles instead of the media=all author CSS?"
David Dorward
2010-06-24 15:04:40
+1
A:
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.
Brian Scott
2010-06-24 14:53:36
That is a very nice idea. Does CSS nest like that? I have used CSS for a long while and haven't come across that at all!
danixd
2010-06-24 15:12:49
There is no nesting there, that is just the syntax for @ rules. They aren't selectors, so you don't have a rule-set inside another rule-set.
David Dorward
2010-06-24 15:24:14
@danixd, check the following url:http://www.w3.org/TR/CSS2/media.html
Brian Scott
2010-06-24 15:50:05
I quite like the idea, although you would not want to apply this to every single line of CSS that formats text.
danixd
2010-06-24 15:50:24
My bad, I did know of this before, I have just never used it and for some reason believed the markup was not structured like that. Thanks.
danixd
2010-06-24 16:13:28
@danixd, usually the traditional way to do it is to have the seperate print sheet override the normal css rules in a reducing manner. For the most part your print stylesheet should simply be removing styles by overriding etc. The approach you are asking for is to prevent the style from being applied to the most common view mode in the first place and therefore you might find maintenance becomes harder as you end up placing @media screen statements everywhere. I'd recommend that you change your approach to simply override the styles you don't deem suitable for printing.
Brian Scott
2010-06-24 16:18:51
That is how I am doing it at the moment:<link href="main.css" rel="stylesheet" type="text/css"><link href="print.css" rel="stylesheet" type="text/css" media="print">And overriding. Just seeing if there was a way to set the CSS back to default. I guess there isn't an easy way of achieving it! Thanks for the help though.
danixd
2010-06-24 16:28:37
@danixd, ah, I see. No unfortunately not as there is no reset functionality. One thing that I tend to do in my ASP .net solution is to have a piece of logic that looks for a param named print during the page rendering. If it's there then the page has to be rendered in print mode and I do not include the server side generated reference to the main core css stylesheet containing all the rich styling that's only intended for the main screen mode. This can also be implemented in the root masterpage code behind if you wish to apply this logic across your entire site if suitable.
Brian Scott
2010-06-24 16:43:09
A:
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">
danixd
2010-06-25 10:03:26