Setting Up the Print CSS


In the past, many sites provided two versions of each pageone designed for the screen and the other designed to be printed. The two versions generally used the same content, but were presented in different ways.

One advantage of CSS is that you can style a page for print without the need for additional pages. This is achieved using the media attribute, which can be applied to external style sheet links (as shown in Listing 20.1) or to the style element for embedded styles (as shown in Listing 20.2).

Listing 20.1. HTML Code Containing a Link to an External Style Sheet with a Media Value of screen
 <link rel="stylesheet" href="lesson20.css" type="text/css" media="screen"> 

Listing 20.2. HTML Code Containing an Embedded Style Sheet with a Media Value of screen
 <style type="text/css" media="screen" > <!-- ... Screen style rules go here ... --> </style> 

If your layout needs to be identical for screen and print, the media attribute value can be set to all as shown in Listing 20.3 (for external style sheets) and Listing 20.4 (for embedded styles).

Listing 20.3. HTML Code Containing a Link to an External Style Sheet with a Media Value of all
 <link rel="stylesheet" href="lesson20.css" type="text/css" media="all" > 

Listing 20.4. HTML Code Containing an Embedded Style Sheet with a Media Value of all
 <style type="text/css" media="all" > <!-- ... All style rules go here ... --> </style> 

If the layout needs to be different for screen and print, the media attribute values can be set to screen and print as shown in Listings 20.5 and 20.6.

Listing 20.5. HTML Code Containing Links to External Style Sheets with Media Values Set to screen and print
 <link rel="stylesheet" href="lesson20.css" type="text/css" media="screen" > <link rel="stylesheet" href="lesson20-print.css" type="text/css" media="print" > 

Listing 20.6. HTML Code Containing Embedded Style Sheets with Media Values Set to screen and print
 <style type="text/css" media="screen" > <!-- ... Screen style rules go here ... --> </style> <style type="text/css" media="print" > <!-- ... Print style rules go here ... --> </style> 

Media Types and Older Browsers

There are currently 10 media types within the CSS2 Specification. They are


  • allSuitable for all devices

  • auralFor speech synthesizers

  • brailleFor Braille tactile-feedback devices

  • embossedFor paged Braille printers

  • handheldFor handheld devices such as mobile phones and PDAs

  • printFor print material and for documents viewed in Print Preview mode

  • projectionFor projected presentations

  • screenFor color computer screens

  • ttyFor media using fixed-pitch character grids such as teletypes and terminals

  • tvFor television-type devices

Multiple media types can be provided within the same attribute as long as they are separated by commas. For example, you could use media="print, projection" to target these media types only.

If no media type is specified, screen will be applied because it is the default value.

Some early browsers, such as Netscape Navigator 4, do not understand the all media type or commaseparated media types. If you intend to support these browsers, it might be best to specify screen or no media type at all.





Sams Teach Yourself CSS in 10 Minutes
Sams Teach Yourself CSS in 10 Minutes
ISBN: 0672327457
EAN: 2147483647
Year: 2005
Pages: 234
Authors: Russ Weakley

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net