In this tutorial, you'll create a print style sheet. To make the printed version of a web page look better, you'll add styles that remove unwanted page elements and backgrounds, change text formatting, and print the URLs attached to any links on the page.
To get started, download the tutorial files from this book's companion website at http://www.sawmac.com/css2e/. Click the tutorial link, and then download the files. All of the files are in a Zip archive, so you need to unzip them first. (You'll find detailed instructions on the website.) The files for this tutorial are in the 14 folder.
To get started, you first need to understand how the page is laid out so you can decide which elements you want printed.
Launch a web browser and open 14 → print.html.
This web page is a float-based layout consisting of several <div> tags (see Figure 14-4). In all likelihood, anyone printing this page is most interested in the main content—the large central body of text. Printing the navigation bar and sidebar is just a waste of toner, so your print style sheet should hide these parts of the page.
In a text editor, create a new file named print.css and save it along with the main style sheet in the css folder inside the 14 folder.
In your new print style sheet, the first order of business is to hide the navigation bar and other parts of the page that you don't want to print.
Using the display property, create a new group selector that hides the navigation elements and sidebar, like so:
#sidebar, #navWrapper, #footerNav { display: none; }With the display property set to none, web browsers hide those elements so they won't print. But first you need to attach this external style sheet to your web page so browsers can find it.
In your text editor, open 14 → print.html.
This page already has an attached style sheet—main.css. This external style sheet provides all of the formatting for the page when it's displayed in a browser. Also, since the style sheet is attached using the <link> tag with no media attribute specified, it applies when the page is printed as well. Your print style sheet, then, needs to override any styles from the main.css file that won't look good in print. The first step in that process is attaching the print style sheet after the main.css file in the html of this page.
Locate the <link> tag in the head of the page used to attach the global.css file. Insert a blank line after that tag, and then add the following:
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
If properties from two styles with the same name conflict, the properties from the style sheet last linked on the page wins, so this <link> must go after the other <link>. That way, if the main.css file has a class named .copyright that creates white, 10-pixel type on a black background, you can create another style named .copyright in the print style sheet with black, 12-point type on a white background. Even though the two styles share the same name, the properties from the print style sheet win because it's the last one linked. (See Specificity: Which Style Wins for more detail on this cascading rule.)
Save the print.css and print.html files, and then preview print.html in a web browser.
The page should look no different than it did in step 1 above. That's because you haven't printed it yet. You can see the effect of the print style sheet by using your browser's Print Preview command.
If you're using Windows, choose File → Print Preview. Mac fans should choose File → Print, and then, in the Print window that appears, click the Preview button.
In the Print Preview window, you'll see that the right sidebar and navigation have disappeared. But the design still doesn't look that great. The main content doesn't fill the page as it should. You'll fix that—and a few other things—next.
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.
Return to your text editor and the print.css file. Add one new group style to remove widths and margins of the areas of the page that will be printed:
#banner, #mainWrapper, #footer, #main { width: auto; margin: 0; padding: 0; }The first declaration—width:auto—affects several areas of the page. It overrides the 900-pixel width setting for the main text and footer in the main.css file and leaves the exact width up to the web browser. Auto simply lets the <div> fill the entire available width, so no matter the paper size—letter, A4, or whatever—the content fills the width of the printed page. The two other declarations, margin and padding, remove any space around these divs.
The copyright content, contained inside a <div> with the ID footerMain, doesn't have a set width, but it does have a left margin—that indent will look strange when printed, so you should get rid of it.
Add another style to the print.css style sheet:
#footerMain { margin: 0; }While you've hidden the right sidebar, which is positioned using a float, the main content is still floated—it doesn't have to be for the printed page.
Add another style to the print.css style sheet:
#main { float: none; }Other problems can arise when printing a float-based layout. As described on Clearing and Containing Floats, floated elements can pop out of the bottom of their containers, preventing backgrounds and borders from showing properly. One solution: add the declaration overflow: hidden; to the containing block's style. However, hiding overflowing content can sometimes cause printed material to not show up. So, you need to turn that off for two styles:
Add another style to the print.css style sheet:
#mainWrapper, #footer { overflow: visible; }This style ensures that content inside those two divs is fully displayed.
There are also a few background colors and images sprinkled throughout the page. Sometimes background images and colors print out, but often they don't. It all depends on the browser and the visitor's settings. Some browsers don't print background elements at all; others can print them but give folks the option of turning them on or off. Printing backgrounds is useful when it's important for the printed page to look just like the screen version. But when you have backgrounds that would only be a distraction and a waste of ink, do your visitors a favor and disable them.
Add another style to the print.css style sheet:
html, body, #banner, #footerWrapper { background: #FFF; }When viewed onscreen, this page has various background colors and images. The banner, for example, has a background image for the "About Us" tag and the footer area has a purple background color. This style sets the background color of the page and banner to white and removes the graphic. (See Removing background elements for the story on why the background image disappears as well.)
The banner area containing the site logo also doesn't look very good in print. That area is too tall, since it was expanded to hold a background image that won't appear in print. So you'll adjust the height—and while you're at it, you'll improve the overall look of this top section by centering the logo and adding lines above and below it.
Add a new style to the print.css file:
#banner { height: auto; text-align: center; border-bottom: 2pt solid #000; border-top: 2pt solid #000; padding: 10pt 0; margin-bottom: 15pt; }
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.
In the print.css file, add the following CSS rule:
* { color: #000000 !important; }This style is the CSS equivalent of a sledgehammer. It essentially tells every tag to use black text no matter what. The * (universal selector) is a quick way of specifying a style for every single element on a page, while the !important declaration cancels out any conflicts caused by the cascade. So even though * isn't a very specific style, the color property here trumps the same property in much more specific styles like #main h1 or #nav #mainNav a.
Next you'll set new font sizes for the text.
Add the following three styles:
h1 { font-size: 30pt !important; } h2 { font-size: 16pt !important; } p, li { font-size: 11pt !important; }These styles make each of these tags use a more printer-friendly font size. The addition of !important makes these sizes always apply to those tags regardless of any style conflicts with the main.css style sheet.
Note
In this case, h1, h2, p, and li are the only tags that print from the print.html page. Your pages may require you to redefine text sizes for other tags like blockquote, other headlines and so on.
Just for fun, add a couple of styles to change the font size of the copyright notice and add a borderline above it.
Add the following two styles:
#footerMain { margin-top: 15pt; border-top: 1pt solid #000; padding-top: 5pt; } #footerMain p { font-size: 9pt !important; }The CSS properties in these styles should all be old hat by now. They adjust space above the footer, add a borderline, add some space between the border and the copyright, and make the copyright notice text smaller. Notice the !important declaration in the #footerMain p style. You need to add this because the p style from step 2 has !important as well. Because #footerMain p has greater specificity (see Specificity: Which Style Wins for more on this concept) than p, its !important declaration wins out.
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.
Add one last style to the print.css style sheet:
a:after { content: " (" attr(href) ") "; }In the content: line, this style adds the URL (the attr(href) part) at the end of each link (the a:after part).
Save the print.css file. In your browser, open cosmo.html and print it.
The printed page should look something like Figure 14-5—a simple, barebones, just-the-facts page.
You'll find a completed version of the page in the 14_finished folder.
