Print CSS for other site

HTML & CSS
1

At work, we have a site that we cannot easily control: adding a print stylesheet must go through a Change Management process (at times, we would like to actually change our management with the Change Management process but it got rejected).

Therefore, our internal staff would like to know if there is a way that we can have a print stylesheet on our system (I am capable of writing one) that we could apply to pages that we print from this site of ours.

If I cannot edit this site and add a print stylesheet < link> to the code, how do I establish a “link” between my local print stylesheet and the site?

2

Well if you can’t use <link> in the actual HTML you could either open up a CSS file

  1. Use @import to import the stylesheet only for the print media
@import url("print.css") print;

OR

@media print {
  /* style sheet for print goes here OR use the import statement shown above*/
}

You have to link the stylesheet SOMEHOW.

You can either open up your regular CSS stylesheet and use the @import as shown in my first example.

Or you could use @media and @import the stylesheet/write the printing styles there :slight_smile:

3

Generally, to link a user stylesheet to a selected site, the site need some css identification to combine with the css selectors. That’s why some sites has the body tag named like “id=www-thissite-com”.

@media print {
    body#www-thissite-com { background:#fff !important; color:#000 !important;}
}

If you use FF there is another option: Use the @-moz-document at-rule in the user stylesheet to load another stylesheet that use the media at-rule (to work around an [URL=“http://www.w3.org/TR/CSS21/syndata.html#at-rules”]illegal nested at-rule). FF user stylesheet is called [URL=“http://www.mozilla.org/unix/customizing.html#userContent”]userContent.css and is found in your profile directory.

Browsers mostly have a default directory for user stylesheets. In IE you select your own through the accessibility button found in “internet options” from the tools menu or Windows cp. An ad hoc solution could be to use a dedicated browser setup with a costume user stylesheet.

4

For Opera, simply add your own user style sheet via the Site Preferences for that site.