1. Introduction
One of the fundamental design principles of CSS is cascading, which allows several style sheets to influence the presentation of a document. When different declarations try to set a value for the same element/property combination, the conflicts must somehow be resolved.
The opposite problem arises when no declarations try to set a the value for an element/property combination. In this case, a value is be found by way of inheritance or by looking at the property’s initial value.
The cascading and defaulting process takes a set of declarations as input, and outputs a specified value for each property on each element.
The rules for finding the specified value for all properties on all elements in the document are described in this specification. The rules for finding the specified values in the page context and its margin boxes are described in [CSS3PAGE].
2. Importing Style Sheets: the @import rule
The @import rule allows users to import style rules from other style sheets. If an @import rule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the @import rule.
For example, declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the @import. Similarly, style rules in a stylesheet imported into a scoped stylesheet are scoped in the same way.
Any @import rules must precede all other at-rules and style rules in a style sheet (besides @charset, which must be the first thing in the style sheet if it exists), or else the @import rule is invalid. The syntax of @import is:
@import [ <url> | <string> ] <media-query-list>? ;
Where the <url> or <string> gives the URL of the style sheet to be imported, and the optional <media-query-list> (the import conditions) states the conditions under which it applies.
If a <string> is provided, it must be interpreted as a url with the same value.
@import "mystyle.css";
@import url("mystyle.css");
The import conditions allow the import to be media-dependent. In the absence of any import conditions, the import is unconditional. (Specifying all for the <media-query-list> has the same effect.)
The evaluation and full syntax of the expressions after the URL is defined by the Media Queries specification [MEDIAQ]. If the media query does not match, the rules in the imported stylesheet do not apply, exactly as if the imported stylesheet were wrapped in an @media block with the given media query. User agents may therefore avoid fetching a media-dependent import as long as the media query does not match.
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
When the same style sheet is imported or linked to a document in multiple places, user agents must process (or act as though they do) each link as though the link were to an independent style sheet.
Note: This does not place any requirements on resource fetching, only how the style sheet is reflected in the CSSOM and used in specs such as this one. Assuming appropriate caching, it is perfectly appropriate for a UA to fetch a style sheet only once, even though it’s linked or imported multiple times.
The origin of an imported style sheet is the same as the origin of the style sheet that imported it.
The environment encoding of an imported style sheet is the encoding of the style sheet that imported it. [CSS3SYN]
2.1. Content-Type of CSS Style Sheets
The processing of imported style sheets depends on the actual type of the linked resource.
If the resource does not have Content-Type metadata,
or the host document is in quirks mode
and has the same origin as the imported style sheet,
the type of the linked resource is text/css.
Otherwise, the type is determined from its Content-Type metadata.
If the linked resource’s type is text/css,
it must be interpreted as a CSS style sheet.
Otherwise, it must be interpreted as a network error.
3. Shorthand Properties
Some properties are shorthand properties, meaning that they allow authors to specify the values of several properties with a single property. A shorthand property sets all of its longhand sub-properties, exactly as if expanded in place.
When values are omitted from a shorthand form, unless otherwise defined, each “missing” sub-property is assigned its initial value.
For example, writing background: green rather than background-color: green ensures that the background color overrides any earlier declarations that might have set the background to an image with background-image.
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}
can therefore be rewritten as
h1 { font: bold 12pt/14pt Helvetica }
As more font sub-properties are introduced into CSS, the shorthand declaration resets those to their initial values as well.
In some cases, a shorthand might have different syntax or special keywords that don’t directly correspond to values of its sub-properties. (In such cases, the shorthand will explicitly define the expansion of its values.)
In other cases, a property might be a reset-only sub-property of the shorthand: Like other sub-properties, it is reset to its initial value by the shorthand when unspecified, but the shorthand might not include syntax to set the sub-property to any of its other values. For example, the border shorthand resets border-image to its initial value of none, but has no syntax to set it to anything else. [CSS3BG]
If a shorthand is specified as one of the CSS-wide keywords [CSS3VAL], it sets all of its sub-properties to that keyword, including any that are