CSS Syntax and Property Reference - HTML and CSS: The Complete Reference - page 541

Note

• The particular font technologies for downloadable fonts vary significantly between
browsers. Internet Explorer has supported EOT files since IE 4. Netscape supported
TrueDoc downloadable fonts but these were phased out. Firefox 3.5, Safari 3, and
Opera 10 have reintroduced downloadable fonts using TrueType files. See Appendix B
for examples of mixing the various technologies.

@media
An @media rule can be used to define style rules for multiple media types in a single
embedded style sheet.

Examples
<style type="text/css">
@media screen { /* screen rules */ }
@media print { /* print rules */ }
@media screen, print { /* screen and print rules */ }
</style>

The syntax may look a little odd because you have to wrap style blocks with more curly
braces, like so:

<style type="text/css">
@media screen {body
{font-family: sans-serif;
font-size: 14px;}
}

@media print {body
{font-family: serif;
font-size: 10px;}
}
</style>

A variation of this syntax with device constraints, dubbed a “Media Query,” is supported in
many browsers and is discussed in Chapter 6.

@page
An @page rule is used to define a page block for printed styles. Generally, within this
construct we see various CSS properties like size , page , and margin to control the
dimensions of the page.

Examples
/* sets tables to be on landscape pages */
@page {size: 8.5in 11in; margin: .5in;}
@page {marks: crop;}
/* we can name particular page's rules as well with an identifier */
@page report {size: landscape;}