7.5 CSS Styling for Print^2917.5CSS Styling for Print
Even though the advent of the “paperless society” has been talked about for decades,
the fact is that many people still love paper and you can expect your Web pages to be
printed. CSS offers you some control over what gets printed and how the printouts are
configured.
This is easy to do using external style sheets. Create one external style sheet with the
configurations for browser display and a second external style sheet with the special
printing configurations. Associate both of the external style sheets to the Web page
using two elements. The elements will utilize a new attribute, called
mediawhich is described in Table 7.2.
CHECKPOINT 7.1
- Describe a reason to organize the files in a Web site using folders and subfolders.
- State a reason to use an unordered list to configure navigation links.
- You are using CSS pseudo-classes on a Web page to configure the navigation links to
look like buttons. You want the “regular” links in the Web page content to be configured
as they normally would (not look like a button). Describe how you could configure the
styles and XHTML to accomplish this.
Table 7.2 Themediaattribute
Value Purpose
screen The default value; indicates the style sheet that configures typical
browser viewport display on a color computer screen
print Indicates the style sheet that configures the printed formatting
handheld Indicates the style sheet that configures display on handheld
mobile devicesModern browsers will use the correct style sheet depending on whether they are rendering
a screen display or preparing to print a document. Configure the link element for your
browser display with media="screen". Configure the link element for your printout
withmedia="print". An example of the XHTML follows:
<link rel="stylesheet" href="wildflower.css" type="text/css"
media="screen" />
<link rel="stylesheet" href="wildflowerprint.css" type="text/css"
media="print" />
Oftendisplay:noneis used in the print style sheet to prevent banner ads, navigation,
or other extraneous areas from appearing on the printout. Another common practice is to
configure the font sizes on the print style sheet to use ptsizes—this will better control
the text on the printout. You can also use styles to configure areas in the document, such
as detailed contact info, that are only printed out and do not appear in the browser