To attach an external style sheet while specifying a particular media type, use the <link> tag with a media attribute. To link a style sheet that should be used only for printing, add this HTML to your web page:

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

If you don’t specify any media, a web browser assumes you’re targeting all media, so it uses the style sheet for screen display, printing, and so on. In addition, you can specify multiple media types by separating them with commas. A linked external style sheet targeting multiple media might look like:

<link rel="stylesheet" type="text/css" media="screen, projection, handheld"
href="screen.css"/>

You probably won’t need to specify more than one until browsers start recognizing multiple media types.

You can also include media-specific styles directly inside a style sheet using the @media directive. Maybe you want to add a couple of print-specific styles to an internal style sheet. Or perhaps you’d like to keep all your styles in a single external style sheet and just add a few printer-only styles. You can do so using the @media directive, like so:

@media print {
  /* put your styles for the printer in here */
}

Be careful to include that closing brace (on the last line), otherwise the directive won’t work. Here’s an example of using @media to include two printer-only styles:

@media print {
  h1 {
    font-size: 24pt;
  }
  p {
    font-size: 12pt;
  }
}

Technically, it doesn’t really matter whether you put all styles in a single file and use the @media method or put media-specific styles in their own external style sheets (like screen.css, and printer.css). Putting all your printer-only styles in their own external style sheet named something like printer.css makes it a lot easier to find and edit styles for print only.

As mentioned earlier, it’s often useful to create a style sheet without specifying a media type (or by using media="all”). When you’re ready to define some print-specific rules, you can just create a separate style sheet to override any styles that don’t look good in print.

Say you’ve got an <h1> tag that’s styled to appear blue onscreen, and you’ve also chosen rules controlling letter spacing, font weight, and text alignment. If the only thing you want to change for your printed pages is to use black rather than blue, then you don’t need to create a new style with a whole new set of properties. Just create a main style sheet that applies in both cases and a print style sheet that overrides the blue color for the <h1> tag.

One problem with this approach is that you need to make sure the printer styles actually do override the main style sheet. To do this successfully, you have to carefully manage the cascade. As discussed in Chapter 5, styles can interact in complex ways: Several styles may apply to the same element, and those styles’ CSS properties can merge and override each other. There’s a surefire way to make sure one property trumps all others—the !important declaration.

When you add !important after the value in a CSS declaration, that particular property overrides any conflicts with other styles. Add this rule to a print style sheet to ensure that all <h1> tags print black:

h1 {
  color: #000 !important ;
}

This h1 style overrides even more specific styles, including #main h1, h1.title, or #wrapper #main h1 from the main style sheet.

You may not necessarily want to have text look the same onscreen as it does in print. A good place to start when creating a printer style sheet is by modifying the font-size and color properties. Using pixel sizes for text doesn’t mean much to a printer. Should it print 12-pixel type as 12 dots? If you’ve got a 600 DPI printer, that text will be illegibly small. And while bright green text may look good onscreen, it may come out a difficult-to-read pale gray when printed.

Pixels and ems (Using Pixels) make sense for onscreen text, but the measurement of choice for printing is points. Points are how Word and other word-processing programs measure font sizes, and they’re what printers expect. In practice, most web browsers translate pixel and ems to something more printer friendly anyway. The base onscreen font size for most browsers—16-pixels—prints out as 12 points. But there’s no consistent way to predict how every browser will resize text, so for maximum printing control, set the font size specifically to points in your print style sheets.

To make all paragraphs print in 12-point type (a common size for printing), use the following rule:

p {
  font-size: 12pt;
}

Likewise, screen colors don’t often translate well when printed on a black-and-white laser printer. Crisp black text on white paper is much easier to read, for instance, than light gray letters. What’s more, as you’ll see in the next section, white text on a black background—though very legible onscreen—often doesn’t print well. To make text most readable on paper, it’s a good idea to make all text print black. To make all paragraph text black, add this style to your print style sheet:

p {
  color: #000;
}

As mentioned on the previous page, if your print style sheet competes with styles from another attached style sheet, then use !important to make sure your printer styles win:

p {
  font-size: 12pt !important;
  color: #000 !important;
}

To make sure all text on a page prints black, use the universal selector (Constructing Group Selectors) and !important to create a single style that formats every tag with black text:

* { color: #000 !important; }

Of course, this advice applies only if your site is printed out in black and white. If you think most visitors to your site use color printers, then you may want to leave all the text color in or change the colors to be even more vibrant when printed.

Adding background images and colors to navigation buttons, sidebars, and other page elements adds contrast and visual appeal to your web pages. But you can’t be sure if the background will come through when those pages are printed. Because colored backgrounds eat up printer ink and toner, most web browsers don’t normally print them, and most web surfers don’t turn on backgrounds for printing even if their browser has this feature.

In addition, even if the background does print, it may compete with any text that overlaps it. This is especially true if the text contrasts strongly with a colorful background on a monitor but blends into the background when printed on a black-and-white printer.

.headHighlight {
  color: #000;
  background: #FFF;
}

Web pages are often loaded with informational and navigational aids like navigation bars, sidebars full of helpful links, search boxes, and so on. These elements are great for surfing the Web, but don’t do much good on a piece of paper. Your web pages may also contain ads, movies, and other doodads that people don’t like to waste expensive ink and toner on. You can do your visitors a favor by stripping these onscreen frills out of the content they really want to print.

a:after {
 content: " (" attr(href) ") ";
}

a[href^="http://"]:after {
 content: " (" attr(href) ") ";
}

As you learned in the third part of this book, one way to lay out a page is to wrap <div> tags around different layout elements—banner, main navigation, content, copyright notice, and so on. By styling each <div> using floats or absolute positioning, you can place various page elements right where you want them. You can use that same structure to create a print-only style sheet that hides unwanted elements using the display property.

By setting the display value to none, you can make a web browser remove a styled element from a page. So to prevent a sidebar from printing, simply redefine that style in a print style sheet and set its display property to none:

#sidebar {
  display: none;
}

For most pages, you want the print style sheet to display only the most basic informational elements—like the logo, the main content, and a copyright notice—and hide everything else. You can easily hide multiple elements with a group selector, like so:

#banner, #mainNav, #sidebar, #ads, #newsLinks {
  display: none;
}

Remember, these styles go into your print style sheet, not the main style sheet. Otherwise, you’d never see the navigation, banner, or other important areas of your page onscreen. However, at times you might want to hide something from your main style sheet and reveal it only when printed.

Say you place your site’s logo as a background image inside the banner area of a page. You may want to do this to have text or links appear on top of an empty area of the logo graphic. You (or your boss or client) certainly want the logo to appear on any printed pages, but since not all browsers print background images, you can’t be sure the logo will appear when printed. One solution is to insert an <img> tag containing a modified, printer-friendly version of the logo graphic; add an ID to the image; create an ID style in the main style sheet with the display property set to none; and then set the display property for the same ID style in the print style sheet to block. Voilà! The logo appears only when printed.

Version 2.1 of the Cascading Style Sheet standard includes many CSS properties aimed at better formatting a printed web page: from setting the orientation of the page to defining margins and paper size. (You can see the full list at www.w3.org/TR/CSS21/page.html.) Unfortunately, today’s web browsers recognize very few of these print styles.

Two widely recognized properties are page-break-before and page-break-after. Page-break before tells a browser to insert a page break before a given style. Say you want certain headings to always appear at the top of a page, like titles for different sections of a long document (see Figure 14-3). You can add page-break-before: always to the style used to format those headings. Likewise, to make an element appear as the last item on a printed page add page-break-after: always to that element’s style.

The page-break-before property is also useful for large graphics, since some browsers let images print across two pages, making it a little tough to see the whole image at once. If you have one page with three paragraphs of text followed by the image, then the browser prints part of the image on one page and the other part on a second page. You don’t want your visitors to need cellophane tape to piece your image back together, so use the page-break-before property to make the image print on a new page, where it all fits.

Here’s a quick way to take advantage of these properties. Create two class styles named something like .break_after and .break_before, like so:

.break_before { page-break-before: always; }
.break_after { page-break-after: always; }

You can then selectively apply these styles to the elements that should print at the top—or bottom—of a page. If you want a particular heading to print at the top of a page, then use a style like this: <h1 class="break_before">. Even if the element already has a class applied to it, you can add an additional class like this: <h1 class="sectionTitle break_before">. (You’ll learn about this useful technique in the next chapter on Use Multiple Classes to Save Time.)

Figure 14-3. Normally when printing a web page, a browser breaks the content into multiple pages to fit as much content on each page as possible (left). But if you want to put page breaks in more attractive and logical places, then use the page-break-before property (right).

To get started, you first need to understand how the page is laid out so you can decide which elements you want printed.

Currently, the main content and the footer copyright notice don’t fit the printed page correctly: The main content stops short of the right edge of the page, while the copyright is indented from the left edge. Both would look better if they filled the entire printable area.

Two styles are currently controlling the layout. In Figure 14-4, you can see that the page is divided into several areas, each created with a separate <div> tag. The #mainWrapper and #footer are both used to center and set a width of 900 pixels for the main content area and the footer area. In addition, the #main style has a set width, while the #footerMain style has a left margin. Since you don’t know what size paper this page might be printed on, you should get rid of all widths and remove any margins.

The first property eliminates the height of the banner, letting it size itself based on the content of the <div>. In other words, it will just be as tall as the logo graphic inside it. The text-align property centers the logo for a refined, classic look. The border settings add lines above and below the logo, while the padding adds space between the logo and the borders. Note these styles use pt (points), since that’s a more normal way of measuring items for print.

Feel free to save this file, preview the print.html file in a web browser, and use the Print Preview function to see how the printed version’s coming along.

While colored text and pixel-sized fonts may work on the screen, laser printers understand point sizes better. Also, solid black text looks better on white paper. In this section, you’ll adjust the text accordingly to look better in print.

For a final flourish, you’ll add one more style that prints the URL next to the text of each link on the page. That way, the onscreen text “Click here to find out more” will print as “Click here to find out more (http://www.outmore.com)” so anyone reading the printed version can visit the site referenced by the link. This technique uses some advanced CSS that Internet Explorer 6 and 7 doesn’t understand, but it doesn’t do any harm in those browsers, either. And it is a great enhancement for visitors who print from your site with IE 8, Firefox and Safari.