Section 4.4. At-Rules

4.4. At-Rules

CSS2 defines an extensible structure for declarations or directives (commands, if you will) that are part of style sheet definitions. They are called at-rules because the rule starts with the "at" symbol (@) followed by an identifier for the declaration. Each at-rule may then include one or more descriptors that define the characteristics of the rule.

Although at-rules typically appear as the first declarations in a style sheet, in practice some (@media in particular) work best when only one occupies each style sheet. The following sequence provides different style characteristics for a document when viewed on screen and printed on paper (relative font size on the screen, absolute on paper):

 <style type="text/css"> @media screen {     body {font-size: 14px} } </style> <style type="text/css"> @media print {     body {font-size: 12pt} } </style> 

The @font-face rule can be used to download font definition files to the IE browser, and associate each font definition with a font family name to be assigned by succeeding style assignments. Here is an example that downloads one of the Internet Explorer accepted font file formats, assigning the definition to a font family name called Stylish:

 <style type="text/css"> @font-face {     font-family: Stylish;     font-weight: normal;     font-style: normal;     src: url(fonts/stylish.eot); } </style> 

IE allows you to define multiple @font-face rules in the same style sheet. Visit http://msdn.microsoft.com/workshop/author/fontembed/font_embed.asp for details on how to create font definition files that work with IE for Windows and Macintosh.

Already supported by a few mainstream browsers, CSS3 namespaces are initially declared via the @namepace rule. Any subsequent selectors that wish to reference an element name defined in the namespace must cite the namespace name, followed by a pipe character (|), and then the element name. For example, the following rules would apply the blue color only to TD elements defined in the products namespace:

 @namespace products url(http://www.example.com/DTD/productDB); products|td {color: blue} 

Table 4-5 provides a summary of the at-rules supported by CSS and mainstream browsers.

Table 4-5. CSS at-rules

Name	IE/Windows	Mozilla	Safari	Opera	CSS	Description
@namespace	n/a	1.0.1	1.3/2	9	2	Character set used for external style sheet file.
@charset	5	m18	n/a	7	2	Character set used for external style sheet file.
@font-face	4	n/a	n/a	n/a	n/a	Font description to assist in font-matching between an embedded font and the client system font (or downloaded font).
@import	4	m18	all	7	1	Imports an external style sheet. See Chapter 3 for the impact on the cascade.
@media	5	m18	all	7	2	Defines an output media type for one or more style sheet rules. Rules assigned to the same selectors but inside different @media rules (e.g., @media print or @media screen) adhere to media-specific rules when the document is rendered in the specified medium.
@page	n/a	n/a	n/a	7	2	Defines the page box's size, margins, orientation, crop marks, and other page-related properties governing the printing of the document.