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):
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 succeed ing 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:
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:
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., @mediaprint 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.
Conventions
The CSS syntax descriptions shown throughout this chapter adhere to the following guidelines:
Words in the Constant Width font are keywords or constant values to be used as-is.
Words in the Constant Width Italic font are placeholders for values.
A value contained by square brackets ( [] ) is optional.
A series of two or more values separated by a pipe symbol ( | ) represent items in a list of acceptable values to be used in the position shown.
A few listings show numbers in brackets ( {1,2} ) after a value. The numbers indicate the minimum and maximum numbers of space-delimited values you can specify.
A double-pipe symbol ( || ) separating multiple values indicates that one or more of the values must be present, but the order is not significant.
The “Applies To” category advises which HTML elements can be influenced by the style property. Some style properties can be applied only to block-level, inline, or replaced elements. A block-level element is one that always starts on a new line and forces a new line after the end of the element ( h1 and p elements, for example). An inline element is one that you can place in the middle of a text line without disturbing the content flow ( em elements, for example). A replaced element is a block-level or inline element that has content that may be changed dynamically without requiring any reflow of surrounding content. The img element falls into this category because you can swap image source files within an img element’s rectangular space.
A listing category called “Initial Value” serves the same purpose as the “Default” category in other reference chapters. The terminology used in this chapter conforms with the terminology of the CSS specification.
Many items contain a category called “Object Model Reference” to show the way scripts can reference the property as properties in a browser’s document object model—specifically, as properties of the style object. Consult Chapter 2 for compatibility ratings for the scripted equivalents of style properties, as they frequently differ from the style sheet property implementations shown in this chapter.