Sent by John Lewis on 4 June 2003 12:12
Chris wrote on Wednesday, June 4, 2003 at 3:07:46 AM:
> I been spending time at the W3schools.com and in their intro
> tutorial on CSS they state the following :
W3schools.com? [typing] Their front page doesn't even validate! Wow.
This is going to be fun.
> <quote>
> Generally speaking we can say that all the styles will "cascade" into a
> new "virtual" Style Sheet by the following rules, where number four has
> the highest priority:
> 1. Browser default
> 2. External Style Sheet
> 3. Internal Style Sheet (inside the 'head' tag)
> 4. Inline Style (inside HTML element)
> </quote>
> Is this an absolute rule or are there exceptions. I`m just a little
> worried about the use of the words "Generally speaking...."
It's pretty bad. I think they say "generally speaking" because they
know their explanation is inaccurate.
The cascade works sort of like this. I'll gloss over some things, but
hopefully I'll give you a much more accurate description of how things
work. (Like that'll be hard!) CSS2 reference:
<http://www.w3.org/TR/REC-CSS2/cascade.html#cascade>
Let's say we want to determine the style of a certain element. (It
doesn't matter what element, the process is always the same.)
First we order the appropriate rules, taking both source and weight of
importance into account. Least important first:
5. all UA styles
4. user styles
3. author styles
2. !important author styles
1. !important user styles
What about imported styles? Easy. If there are any imported styles in
a style sheet, they are less important than styles written directly in
the style sheet.
Why? Because order is also important, as you'll see later. With two
styles of equal weight, the style appearing last is more important.
Imported styles must appear at the beginning of a style sheet, which
means they're always least important. If an imported style sheet
imports another style sheet, the same rule applies.
On to specificity! Hopefully I can make this not confusing, but I
doubt it. CSS2 reference:
<http://www.w3.org/TR/REC-CSS2/cascade.html#specificity>
If we had conflicting styles for our theoretical element above, we're
not done. We now need to determine which rule has more specificity.
Least important first, here are the variables we use to calculate
specificity:
c. the number of element names and pseudo-elements in the selector
b. the number of attribute selectors and pseudo-classes in the
selector [note: a class selector is a type of attribute selector,
so it counts just like one]
a. the number of ID selectors in the selector [note: an attribute
selector matching an ID doesn't count as an ID selector, it just
counts as an attribute selector; e.g., [id=value] has far less
specificity than #value]
After you count these up, you'll get three numbers, some of which are
probably zero. You then assign a number to a, b, and c. Using CSS2's
examples, modified for (a little) clarity:
* a=0 b=0 c=0 specificity = 0,0,0 Lowest
li a=0 b=0 c=1 specificity = 0,0,1
ul li a=0 b=0 c=2 specificity = 0,0,2
ul ol+li a=0 b=0 c=3 specificity = 0,0,3
[id=value] a=0 b=1 c=0 specificity = 0,1,0
h1 + *[rel=up] a=0 b=1 c=1 specificity = 0,1,1
ul ol li.class a=0 b=1 c=3 specificity = 0,1,3
li.c1.c2 a=0 b=2 c=1 specificity = 0,2,1
#value a=1 b=0 c=0 specificity = 1,0,0 Highest
Exception: If the style is embedded in a style attribute, and it
doesn't have a selector, then its specificity is higher than any
selector.
If source, weight, and specificity are all identical, the last way to
tell what's applied is to look at order. In this style sheet:
p{color:red}
p{color:green}
The second rule overrides the first. Simple enough, right? Oh, one
more thing: Embedded presentation that isn't CSS, like font elements,
can be overridden by any author styles and !important user styles, no
matter their specificity. That's about it.
Getting back to the quote:
> 1. Browser default
> 2. External Style Sheet
> 3. Internal Style Sheet (inside the 'head' tag)
> 4. Inline Style (inside HTML element)
We see that one and four are mostly true, but two and three are
outright wrong. Internal/external style sheets, excluding the import
rules outlined above, are equal. One doesn't carry more weight in the
cascade. For example:
<style type="text/css">
p{color:red}
</style>
<link rel="stylesheet" href="p.css" type="text/css">
Where p.css contains:
p{color:green}
Paragraphs should be green. But if you switch the order:
<link rel="stylesheet" href="p.css" type="text/css">
<style type="text/css">
p{color:red}
</style>
They should be red.
--
John Lewis
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/