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>
|