40
<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">
Here is a cascade example that involves both the LINK and STYLE elements.
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
14.4.1 Media-dependent cascades
A cascade may include style sheets applicable to different media. Both LINK and STYLE may be used
with the media attribute. The user agent is then responsible for filtering out those style sheets that do not
apply to the current medium.
In the following example, we define a cascade where the "corporate" style sheet is provided in several
versions: one suited to printing, one for screen use and one for speech-based browsers (useful, say, when
reading email in the car). The "techreport" stylesheet applies to all media. The color rule defined by the
STYLE element is used for print and screen but not for aural rendering.
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
14.4.2 Inheritance and cascading
When the user agent wants to render a document, it needs to find values for style properties, e.g. the font
family, font style, size, line height, text color and so on. The exact mechanism depends on the style sheet
language, but the following description is generally applicable:
The cascading mechanism is used when a number of style rules all apply directly to an element. The
mechanism allows the user agent to sort the rules by specificity, to determine which rule to apply. If no
rule can be found, the next step depends on whether the style property can be inherited or not. Not all
properties can be inherited. For these properties the style sheet language provides default values for use
when there are no explicit rules for a particular element.
If the property can be inherited, the user agent examines the immediately enclosing element to see if a rule
applies to that. This process continues until an applicable rule is found. This mechanism allows style
sheets to be specified compactly. For instance, authors may specify the font family for all elements within
the BODY by a single rule that applies to the BODY element.
180
14.4.1 Media-dependent cascades