How to creating a Print Style Sheet Using CSS

by Cornelius Chopin

To save your viewers money by not wasting both paper and ink, it is best practice to create a print style.  Print style sheets typically adjust color for print, hide unnecessary page elements (i.e., header, footer, menu, etc.) and adjust size and layout for paper size

You want your web site to be "print-friendly." To do this you can create a print friendly version of a style sheet that will automatically be detected by your browser.

Download Print StyleSheet Example

How to create an external Print Style Sheet

TIP It is best to save and rename the main web site style sheet to another name (i.e., print.css). then make change to a few existing rules or add new rules. Then select all of the other rules in the CSS panel that are common to the main style sheet (by holding down the CTL key) and delete them. The reason for this is though the selectors div#mainContent and #mainContent can select the same thing, it can cause problems in a print style sheet.

First, create a CSS print style sheet and link it to the page. A <link> tag will be placed in the head of the page along with your default style sheet(s). It should look something like this:

<link href="rmcs_print.css" rel="stylesheet" type="text/css" media="print" />
<link href="main.css" rel="stylesheet" type="text/css" media="screen" />

Notice that the default style sheet (in this case, main.css) has a media type of "screen"; whereas, the print style sheet (in this case, rmcs_print.css) has a media type of "print" so that the browser can be made aware that the page has a print style sheet.

NOTE: Just by setting the media type to screen, will automatically hides all CSS from the printer until a print CSS file is added. It is simpler to use the document flow and then define styles as needed for the print CSS.

NOTE: Due to the rule of cascade, the style sheets link order can affect rendering in some user agents. The print CSS should be placed AFTER the main CSS file which allows it to override style in the main CSS file as needed. However, when using the screen media type, the cascade order is not important since the printer will not read the screen CSS document.

NOTE: If the Live view is used, the screen/all media type will be render only.

TIP: Printers don't understand pixels, so it is best practice to use points or inches to measure width and font size.

TIP: Sans-serif fonts are best used for monitors; however, serif fonts (i.e., Time New Roman) works best for the printed page because they assist the eyes in making the text easier to read.

How to create quickly check a print style sheet

Use one of the following techniques:

How to set page to print in black and white

To further save your viewers color ink, set the page color to only black and white by adding the following properties to the body tag.  You can also add a easy-to-read font-family:

body{
background-color:white;
background:none
color:black;
font-family: Garamond, Times, "Times New Roman", serif
font-size: 14pt
{

Note that the font Time New Roman is in quotes because it uses a multi-word font. Note also, font-size is specified in pixels work for the screen media but are meaningless to a printer. Hence, font-size has been set to points. The best way to print a page is in black-and-white to save the user color ink unless there is a compelling reason to print in color.

NOTE: It may also be helpful to set the width and margins in the body tag.

How to disable certain area on the page

Next, disable all of the non-essential areas of the page that you don't want your viewer to see. (Typically, the header, footer and navigation areas.) You can use a group selector to do all of them at once instead of creating a seperate rule for each since the property that you are using is common to all

#navigation, hr, body>div>a{
display: none;
}

The display property  is set to none to remove an element from the document flow of the page that is irrelevant to print and the space that they occupy will collapse. The visibility property could be also be used to remove an element that is irrelevant to to printed, but keeps that space that its occupies to retain your original layout and element spacing. The format is:


element{visibility: hidden;}

NOTE: The selector body>div>a will remove any internal links underlines. For example, if you were to try to print this page, link would be changed to link.

In the next section, we are going to format the h1-h4 heading to furhter style the printed page. Will will start with the h1 and proceed all the way to the h4 in that specific order because that how a page should be formated with header tags. The is also important to use the correct order for screenreaders.

How to hide background color or image

To hide background color or image set the background property to none (i.e., background:none;)

Color vs Black-and-White Logo (Do example to demostrate concept - See pg 102 of Mastering CSS with DW 3)

Include both in CSS code. On the screen style sheet, show the color logo and set the print logo to display:none. On the print style sheet, set the print logo to display:block and the screen logo to display:none.

How to redefine the Main Heading

Since the page will print out in black and white, first define a decendent selector that will target the h1 in the header container, as follow:

#header h1{
color: white;
background-color: black;
}

NOTE: This is just the opposite of how we redefined the body tag earlier. This was done so that we could create a masthead with a nice black/white contrast.

Because the header is usually a link to the home page, we need to get more specific to target the link with the following rule:

#header h1 a {
color: white;
}

How to further style the h1 tag

Add the additional self-explainatory rules that are highlighted in bold:

#header h1{
background-color: black;
font-size: 24pt;
text-align: center;
text-transform: uppercase;
font-family: Helvetica, Verdana, Arial, sans-serif;
padding: 7pt
}

How to style the Article Headers

Set the margin for the h2 and h3 tags to zero and add additional properties to style each individually.

#content h2{
padding: 0;
margin: 0;
font-size: 20pt;
border-bottom: 1px solid black;
}

NOTE: For common color, you can specific the color name (i.e., black) instead of its hex value (#000000)

#content h3{
padding: 0;
margin: 0;
text-align: right;
font-style: italic;
}

How to format the h4 tag to style it:

#content h4 {
font-family: Helvetica, Verdana, Arial, sans-serif;
border-top: 3pt solid black;
background-color: #999999;
padding: 12pt;
margin: 0;
}

NOTE: You can use a shortcut for a hex value if they have three sets of same values: #999999 becomes #999

How to format page paragraphs

Currently, the <p> tag inheritance the font properties from the body tag. However, we want to increase the line height between the paragraphs.  So, we need to make a more specific rule for the <p> tag:

#content p{
line-height: 18pt;
}

How to format the footer

If you don't want a footer add " #footer" to the group selector above.  If you do want a footer, you could format it however you want. Here is an example:

#footer{
border-top: 1px solid #000;
text-align: center;
font-family: Helvetica, Verdana, Arial, sans-serif;
}

How to print the actually URL for a link on the page

Any links on the page should display its actual URL. Use the following code to do so:

#content a:after {
content: " <" attr(href) "> ";
font-weight: normal
}

The pseudo-element "after" selector will instruct the browser to add additional content to the page: First, add a  "<" , then the href attribute of the link, and then the closing "> " AFTER each link on the page (i.e., mylink <mylink.html>).

You can also style the anchor tag.

#content a {
text-decoration: none;
font-weight: bold;
color: #626466;
}

Here a is a link to my website. The actual link in "< >" will be displayed when printed

How to print an abbreviations and acronyms

The above technique also works for pages that have a lot of abbreviations or acronyms on them.  First, place the expanded form of the abbreviation or acronym as a title attributes.

<p><acronym title = "Rich Media Creative Services">RMCS</acronym> is a firm believer in<abbr title="Rich Internet Application">RIA</abbr></p>.

Will be displayed when printed as:

RMCS is a firm believer in RIA.

Then add it as a group selector:

abbr:after, acronym:after{
content: " (" attr(title) ") ";
}

How to hide unnecesary images

If only some images need to be hidden, add a class only to the images that needs to be hidden. Otherwise, create a tag selector for all images using the img tag.

Remove floats

Removoe floats so normal document order takes precedence.