Print Style Sheets

At some point in the (hopefully near) future, your sites will be wonderful works of art full of
color, graphics, and interesting column separation. Good for you, and good for the screen, but
that’s not so good for printing. Nobody wants to print an article written in white text on a solid
black or extravagant rainbow background. That uses way too much ink, and is thankfully
avoidable.
All modern browsers support the most common media attributes, which are applied within
the <link> element to target specific style sheets in a specific situation. For example, to ensure only
visitors viewing the web site on a monitor see your glamorous design, you add media="screen" to
the <link> element to call your default style sheet. Underneath that, a second <link> element
can be used with media="print" added to call a print style sheet with only basic styling, such as
black text on a plain white background, and all graphics removed:
<link rel="stylesheet" media="screen" type="text/css" href="screen.css" />
<link rel="stylesheet" media="print" type="text/css" href="print.css" />
If a style sheet has a media type of screen, it will not be used when the page is printed. If no
media type were specified, the style sheet would influence the printed result. Note also that any
style sheet intended only for printing purposes must be given the print media type to prevent
it from being implemented on screen. It is therefore very important to specify media type correctly.
The finer aspects of print style sheet management are covered in Chapter 14 much later in this
book, but it’s very useful to understand the possibilities of the media attribute at this stage.