September 24, 2007

Print Style Sheets - Video Tutorials

All modern browsers support the most common media attributes, which are supplied 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, 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.

<rel ="stylesheet" media="print" type="text/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 is specified, the style sheet would influence the printed results.

note: Any style sheet intended only for printing purposes must be given the print media type to prevent it be from implemented on screen. Nobody wants to print an article written in white text on a solid black or extravagant rainbow background.

Here are some videos (.zip) narrated by CSS guru Eric Meyer on setting up a print style sheet:

Print style overview
Creating a basic style
Hiding graphic content
Improving the look
Modifying sub content
Adding a footer