Skip to content

Commit 0c82ef0

Browse files
ianbjacobsianbjacobs
committed
[css2] Added override section and expanded important example to include override
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%401031
1 parent 62309df commit 0c82ef0

1 file changed

Lines changed: 71 additions & 24 deletions

File tree

‎css2/cascade.src‎

Lines changed: 71 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22
<html lang="en">
3-
<!-- $Id: cascade.src,v 2.4 1998-02-20 19:44:29 bbos Exp $ -->
3+
<!-- $Id: cascade.src,v 2.5 1998-02-21 00:04:43 ijacobs Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>Assigning property values, Cascading, and Inheritance</TITLE>
@@ -75,6 +75,31 @@ applied.
7575
<P>Whenever an element inherits a value, it inherits an
7676
actual value.
7777

78+
<h3>Order of value calculation</h3>
79+
<P><em>This section is under construction</em>
80+
81+
<P>Due to dependencies among properties, user agents must
82+
<a href="cascade.html#computed-value">compute</a> some property
83+
values in a specific order.</P>
84+
85+
<ul>
86+
<li><span class="propinst-font-size">'font-size'</span> must be
87+
computed before any property that may take a <a
88+
href="syndata.html#absrel-units">relative length</a> units.
89+
90+
<li><span class="propinst-display">'display'</span>, <span
91+
class="propinst-position">'position'</span>, and <span
92+
class="propinst-float">'float'</span> must be computed before other
93+
<a href="visuren.html">visual flow</a> properties.
94+
95+
<li><span class="propinst-line-height">'line-height'</span> must be
96+
computed before <span
97+
class="propinst-vertical-align">'vertical-align'</span>.
98+
99+
<li>An element's width and height must be computed before
100+
<span class="propinst-background-position">'background-position'</span>.
101+
</ul>
102+
78103
<H2><a name="inheritance">Inheritance</a></h2>
79104

80105
<P> Some properties are inherited, i.e., a descendant of a node in the
@@ -251,12 +276,13 @@ must apply the following algorithm:</p>
251276
the algorithm.
252277

253278
<LI>
254-
Sort the declarations by explicit weight: declarations marked
255-
<span class="index-inst" title="'important'">'!important'</span>
256-
carry more weight than unmarked (normal) declarations. See the
257-
section on <a href="#important-rules">'important'</a> rules for
258-
more information.
259-
279+
Sort the declarations by explicit weight.
280+
<span class="index-inst" title="!override">!override</span>
281+
declarations, which may only appear in user style sheets,
282+
carry more weight than "!important" declarations.
283+
<span class="index-inst" title="!important">!important</span>
284+
declarations carry more weight than normal (unmarked)
285+
declarations.
260286
<LI>
261287
Sort by origin: the author's style sheets override the user's
262288
style sheets which override the default style sheet. An imported
@@ -284,30 +310,51 @@ weight than those of the reader. It is therefore important that the
284310
User agent gives the user the ability to turn off the influence of a
285311
certain style sheet, e.g., through a pull-down menu.
286312

287-
<H3><a name="important-rules">'Important' rules</a></H3>
313+
<H3><a name="important-rules">!override and !important rules</a></H3>
288314

289-
<P> Style sheet designers can increase the weights of their
290-
declarations by declaring them <span class="index-def"
291-
title="'important'">'important'</span>.
315+
<P>CSS attempts to create a balance of power between author
316+
and user style sheets. Authors are given "extra power" in the
317+
cascade (see point 3 above) so that, by default, the author's
318+
stylistic intentions will prevail. However, CSS offers two mechanisms
319+
that give more weight to user preferences: !important and !override
320+
declarations.
321+
322+
<P>An "!important" declaration (the keywords "!" and "important"
323+
follow the declaration) takes precedence over a normal declaration.
324+
Both author and user style sheets may contain "!important" declarations,
325+
and author "!important" rules override user "!important" rules.
326+
327+
<P>An "!override" declaration (the keywords "!" and "override" follow
328+
the declaration) takes precedence over an "!important" declaration.
329+
<em>Only</em> user style sheets may contain "!override" declarations,
330+
giving the user the final say in the cascade.
331+
332+
<P>Declaring a shorthand property (e.g., <span
333+
class="propinst-background">'background'</span>) to be "!important"
334+
(respectively, "!override") is equivalent to declaring all of its
335+
sub-properties to be "!important" (respectively, "!override").
292336

293337
<div class="example"><P>
338+
The first rule of the user's style sheet in the following example
339+
contains two "!override" declarations. These user preferences will
340+
override all rules that have H1 as a <a
341+
href="selector.html#subject">subject</a>, namely the author's H1
342+
rule. For the P element, on the other hand, the <span
343+
class="propinst-font-size">'font-size'</span> will be '18pt' and the
344+
<span class="propinst-font-style">'font-style'</span> will be 'italic'
345+
since the author's "!important" rule takes precedence.</p>
346+
294347
<PRE>
295-
H1 { color: black ! important; background: white ! important }
296-
P { font-size: 12pt ! important; font-style: italic }
348+
/* From the user's style sheet */
349+
H1 { color: black ! override; background: white ! override }
350+
P { font-size: 18pt ! important; font-style: normal ! important}
351+
352+
/* From the author's style sheet */
353+
H1 { color: yellow ! important; background: blue ! important }
354+
P { font-size: 12pt; font-style: italic ! important }
297355
</PRE>
298356
</div>
299357

300-
<P> In the example above, the first three declarations have increased
301-
weight, while the last declaration has normal weight.
302-
303-
<P> A reader rule with an important declaration will override an
304-
author rule with a normal declaration. An author rule with an
305-
important declaration will override a reader rule with an important
306-
declaration.
307-
308-
<P>Declaring a shorthand property (e.g., <span
309-
class="propinst-background">'background'</span>) to be important
310-
is equivalent to declaring all of its sub-properties important.
311358

312359
<H3>Cascading order in HTML</H3>
313360
<P>In HTML, a selector's specificity is calculated as follows:</p>

0 commit comments

Comments
 (0)