html css media="print",html - CSS @media print rule does not work anymore? - Stack Overflo...

It sounds to me like you have a style rule in your non-print sheet cascading over your print sheet rule. You are using a form of "internal" or embedded styling (not inline or external) that has higher selectivity in the cascade order over external styles but not inline. A true inline style in your HTML or in a screen style sheet with higher selectivity in your styles could be cascading over it.

Additionally: In the case of external linked style sheets, that concept will not work for many modern browsers using a linked style sheet with @media print styles inside if the style sheet has its media attribute value set to anything other than print.....UNLESS all the other non-print styles are inside a matching @media screen{...} rule in that sheet and you remove the "media=screen" attribute from the linked style sheet entirely (defaults to media=all). This may be what is happening in your internal print style example as the browser may assume your other styles are for both screen and print (all).

Many browsers currently will not support that type of mixed media query rule as they don't know what device your sheet and styles combined are designed for and mixing styles like this with without specific media attributes just confuses the parsers. If an external linked parent style sheet says it is set to "screen", it assumes all styles in there are for screen and vice versa. An so it would fail in allowing any print styles to be defined inside. Use of inline styles on elements is even worse as far as defining media type as they would apply to all media types by default.

Older browsers at one time supported a variety of combined media settings like this, but the consensus now is to use external linked sheets for print as it's cross-browser compatible going back to older browsers pre-2001.

BEST PRACTICES FOR PRINT IN CSS

The best way to do print style is to place them in linked sheets specifically set for screen and print as shown below...

In that print sheet you don't need the @media print query any longer as everything in the style sheet with "media=print" will only be seen by printers. But if you do, it also should work ok. It would just be redundant.

There also is another option using the format @import 'print.css' print;. But I don't recommend that as a large number of browsers do not support the media type in @import, including Internet Explorer 1-7 and many others which would ignore this rule and not import the sheet.

You do NOT need !important in any of those rules, EXCEPT if you used !important in your regular style sheets. Those styles would override print sheet values, too. To cascade over those selectors, you would need a more selective copy of that selector or class in your print sheet with the !important value set to properties that match those in your screen sheet's style class.

This is yet another reason to not use !important in style sheets unless absolutely necessary.