Section 13.2. How to Add Media Style Sheets


13.2. How to Add Media Style Sheets

Media style sheets are simply CSS style sheets: They can be either internal or external. However, when you want a Web browser to apply the styles only for a particular device such as a screen or printer, you need to add the style sheet to your Web page in a slightly different way than usual.

13.2.1. Specifying the Media Type for an External Style Sheet

To attach an external style sheet while specifying a particular media type, use the <link> tag with a media attribute. To link a style sheet that should be used only for printing, add this HTML to your Web page:

 <link rel="stylesheet" type="text/css" media="print" href="print.css"/> 


Note: Technically, the rules of CSS also let you define a media type when using the @import method of attaching an external style sheet (see Section 2.4.2), like so: @import url( print.css) print ;. But since Internet Explorer refuses to understand this code, you should avoid using it.

If you don't specify any media, a Web browser assumes you're targeting all media, so it uses the style sheet for screen display, printing, and so on. In addition, you can specify multiple media types by separating them with commas. A linked external style sheet targeting multiple media might look like:

 <link rel="stylesheet" type="text/css" media="screen, projection, handheld" href="screen.css"/> 

You probably won't need to specify more than one until browsers start recognizing multiple media types.


Tip: When you build and test printer style sheets, leave off the media="print" attribute, and turn off any screen-only style sheets. For example, change media="screen" to media="speech" . This technique lets you view the page in a Web browser but have it display as if it were formatted for a printer. Once the printer style sheet looks good, make sure to set its media type to print and turn on any screen-only style sheets.

13.2.2. Specifying the Media Type Within a Style Sheet

You can also include media-specific styles directly inside a style sheet using the @media directive. Maybe you want to add a couple of print-specific styles to an internal style sheet. Or perhaps you'd like to keep all your styles in a single external style sheet and just add a few printer-only styles. You can do so using the @media directive, like so:

  @media print {  /* put your styles for the printer in here */ } 

Be careful to include that closing brace character (on the last line) otherwise the directive won't work. Here's an example of using @media to include two printeronly styles:

 @media print {     h1 {         font-size: 24pt;     }     p {         font-size: 12pt;     } } 

Technically, it doesn't really matter whether you put all styles in a single file and use the @media method, or put media-specific styles in their own external style sheets (like screen.css , and printer.css ). Putting all your printer-only styles in their own external style sheet named something like printer.css makes it a lot easier to find and edit styles for print only.



CSS[c] The Missing Manual
Dreamweaver CS3: The Missing Manual
ISBN: 0596510438
EAN: 2147483647
Year: 2007
Pages: 154

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