Sent by Chris Blake on 5 June 2003 09:09
Howdy John,
First off, thanks for the time and effort in getting this through to
me...
It`s been a week since starting to learn about CSS and, in all honesty,
your reply took a while to get around. After a coupla reads through it
is a bit clearer now.
I`ve followed the links you posted and will continue to use `em as
reference...
Much appreciated
Chris
On Wed, 2003-06-04 at 13:36, John Lewis wrote:
> 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.
--
Chris Blake
Office : (011) 782-0840
Cell : 083 985 0379
Some people's mouths work faster than their brains. They say things
they
haven't even thought of yet.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
