HTML and CSS Reference
In-Depth Information
if you want the same styles to be used by browsers and printers, there's no need to use the media attribute
at all. Omitting it serves the style sheet to all devices.
Specifying Media Types with @import
When using @import to attach an external style sheet, the media type on its own is sufficient. Simply list the
media type(s) after the filename like this:
@import url(styles/print.css) print ;
To specify more than one media type, separate them with commas.
Specifying Media Types for Embedded Styles
If you have embedded styles in the <head> of a page, use the media attribute in the opening <style> tag:
<style media="print" >
/* Embedded styles for printers */
Using @media Rules
You can use @media rules within an external style sheet or <style> block. Simply add the media type(s) after
@media , and wrap the targeted rules in a pair of curly braces. For example, the following @media rule changes the
background color and font characteristics for printers:
body {
background-color: #EFECCA;
color: #000;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
@media print {
body {
background-color: #FFF;
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
The curly braces around the @media rule create what can be thought of as a mini style sheet nested inside another.
The rule inside the @media block applies only to printers, and is ignored by other devices. However, printers
inherit styles that are not overridden. So, the text color is black for both browsers and printers.
you can create completely separate style sheets for visual browsers and printers, and hide them from each
other using the screen and print media types. Alternatively, you can use the cascade and just override specific
styles in a print style sheet. you'll see an example of the first approach later in this chapter.
Search WWH ::

Custom Search