Creating a Print Stylesheet

rint stylesheets are a useful way to offer your readers a better user experience, allowing them to store the information you provide for later use, perhaps when they are without an internet connection. Luckily creating a print stylesheet is a very simple process, and can be incorporated within your Easysite styles with ease.

Including Print CSS within your Main Stylesheet

The best method for creating print styles is to have some reliance on the default stylesheet included by your web browser, as these usually handle print styles pretty well, removing CSS such as background colours and images for you.

With this in mind you can include all of your CSS declarations for printing at the end of your main stylesheet, so using the new Easysite style renderer from v6.5+ this will be either– 

/CSS/master.css

or

/CSS/variant.css

In versions earlier than v6.5 your main stylesheet will be either -

/CSS/RenderEngine.css

or

/CSS/Custom.css Note: For more information on the file structure and naming in Easysite styles, see the Introduction to Easysite Themes. If you are using this method then all of your current CSS for screen styles need to be included within the following rule -

@media screen { ... }

You can then include your print styles at the end of the stylesheet within the rule -

@media print { ... }

Creating a Separate Stylesheet for your Print CSS

If you would prefer to keep your screen and print CSS separately, perhaps for easier maintenance, then this may be a better method for you. Simply create a new CSS file within your Easysite style’s CSS folder, giving it an appropriate name such as print.css. You can then include your print CSS declarations in this file, then include it within your main stylesheet using the following rule –

@import url("/EasySiteWeb/Easysite/StyleData/Your_Style/CSS/print.css") print;

Note: any @import rules must be included before any of the other content in your main stylesheet.

It is worth noting that some older browsers have compatibility issues with @import rules, specifically very old versions of Internet Explorer. Versions 5.5+ should import the stylesheet without a problem, but if you have any issues you may prefer to include the stylesheet using a standard <link> tag in the header of your style using –

<link rel="stylesheet" href="/EasySiteWeb/Easysite/StyleData/Your_Style/CSS/print.css" type="text/css" media="print" />