cascade (whole selector or parts of selector) rules?

Dear CSS gurus,

My question regarding 'the cascade' is a simple one, but one that I haven't
heard anyone talk about before:

When cascading (for instance, when applying two linked stylesheets), does
the whole selector definition supercede and replace a previous one, or does
it go through the selector definition line by line (rule by rule) and only
supercede rules and attributes that are previously defined?

In other words, if you have the following in a permanant stylesheet (as
opposed to persistant or alternate):

div.nav {
text-align : center;
border-bottom: 1px solid #ffff00;
background: #ff4500;
font: bold 12px/normal Arial, Helvetica, sans-serif;
color: #ffffff;
}

and then the user switches to a stylesheet (chooses an alternate stylesheet)
that contains the following (and is defined in coding order after the
previous sheet):

div.nav {
text-align : left;
}

do you lose all of the other rules (color, border, etc.), or will you retain
them and the only thing that will get superceded will be the 'text-align'
attribute ('center' gets superceded by 'left')?

The reason I'm asking is because in my limited experience, and in IE6 at
least (haven't yet tested in Moz, etc.), it seems that the second "div.nav"
definition completely wipes out the first one, which forces me to have to
copy and paste quite a bit of redundant information from one stylesheet to
another.

I thought the whole point of the cascade was to look rule by rule and either
supercede or append rules into the document, not to supercede entire
definitions as a whole. Am I wrong?

-- Richard

"Richard Barnet" <rbarnet (AT) csaNOSPAMreno (DOT) org> wrote

"Richard Barnet" <rbarnet (AT) csaNOSPAMreno (DOT) org> wrote in message
news:bf1vbq$m8g$1 (AT) nnrp (DOT) atgi.net...


"...if you have the following in a persistant stylesheet (as opposed to
preferred or alternate):"

I think I may've stumbled across something... can you have more than one
*preferred* stylesheet in effect at once? Also, if a page loads both a
persistant sheet and a preferred sheet, does it ignore the preferred sheet
until you select it (either in browser menus or via javascript)?

-- Richard

"Richard Barnet" <rbarnet (AT) csaNOSPAMreno (DOT) org> wrote

I think I may've stumbled across something... can you have more than one
*preferred* stylesheet in effect at once?

Actually I partially found an answer, at:

http://www.w3.org/TR/html401/present/styles.html
"If two or more LINK elements specify a preferred style sheet, the first one
takes precedence."

Isn't this a little counter-intuitive, however? Per the cascade, it's
usually the last of something that take effect, not the first...???



-- Richard

In article <bf1vbq$m8g$1 (AT) nnrp (DOT) atgi.net>, rbarnet (AT) csaNOSPAMreno (DOT) org
says...
....

When cascading (for instance, when applying two linked stylesheets), does
the whole selector definition supercede and replace a previous one, or does
it go through the selector definition line by line (rule by rule) and only
supercede rules and attributes that are previously defined?

The latter; the browser overrides rule-by-rule. One thing to watch out
for, however, is shorthand properties. eg 'background: blue;' overrides
background-attachment, background-image, etc.

Also, don't forget inheritance, which depends on the nesting of items in
the html (so 'body:font-family:sans-serif' should set the font of
everything contained within the body).

References:
http://www.w3.org/TR/REC-CSS2/cascade.html
http://www.w3.org/TR/REC-CSS2/colors...def-background
http://www.w3.org/TR/REC-CSS2/cascade.html#inheritance

....

The reason I'm asking is because in my limited experience, and in IE6 at
least (haven't yet tested in Moz, etc.), it seems that the second "div.nav"
definition completely wipes out the first one, which forces me to have to
copy and paste quite a bit of redundant information from one stylesheet to
another.

Shouldn't do. Example URL?

"Jacqui or (maybe) Pete" <porjes (AT) spamcop (DOT) net> wrote

Yeah, I think it's pretty confusing. There are 'preferred',
'persistent', and 'alternate' stylesheets depending on the title and
rel. Note that two stylesheets can have the same title in which case
they should both apply.
....
The idea behind this is that you have one preferred stylesheet and a few
alternate ones that the readers can select (which they can, given a
sufficiently advanced browser or a touch of javascript).

Upon further reading, the part that is really confusing is that there are
really only two types (not three): persistant and alternate. 'Preferred' is
a subtype of alternate (i.e., it *is* an alternate). The ListApart article
is misleading. The W3C recommendation is more clear. Since alternate
stylesheets are mutually exclusive, you can only have one (or one named
group of sheets) at a time. =(

This causes several problems for me, unless I'm just thinking about this all
wrong. I'm working on a site with 6 different sheets (2 persistant [one for
screen, one for print], 1 alternate for largefonts, and 3 alternates for
'skins'). I would like the largefonts sheet to work in conjunction with any
of the skins, but since they're all alternate sheets, I can apparently only
have one at a time. That sucks.

What should happen (at least what I want to happen) is that you come to the
site and get the 'normal' layout (the persistant sheet and skin #1
[preferred alternate] combined). If you're visually impaired, you could
ideally select "largefonts" and still keep skin #1. From there, you could
choose skin #2 or #3 while still keeping largefonts (the largefonts sheet
supercedes the persistant sheet for font sizes).

What's happening in reality, at least for now, is that if you choose
largefonts, you lose the skin, and/or vice versa.

Does anyone know a way around this? I've already thought about grouping
skins together with largefonts, but that multiplies the number of user
options that they have to wade through - (skin #1 normal, skin #1
largefonts, skin #2 normal, skin #2 largefonts, etc.)

It would be nice to just present the user with either normal or largefonts,
and their choice of skin. In other words, it would be nice if the W3C would
take away the "mutually exclusive" rule, and let you stack alternate sheet
upon alternate sheet ad infinitum (or ad nauseum). =)

-- Richard

"Jacqui or (maybe) Pete" <porjes (AT) spamcop (DOT) net> wrote

The reason I'm asking is because in my limited experience, and in IE6 at
least (haven't yet tested in Moz, etc.), it seems that the second
"div.nav"
definition completely wipes out the first one, which forces me to have
to
copy and paste quite a bit of redundant information from one stylesheet
to
another.

Shouldn't do. Example URL?

Actually, I misread the symptoms. It turns out it wasn't the cascade at
all, it was the "mutually exclusive" rule for alternate stylesheets (see our
other sub-thread, above).

-- Richard

"Richard Barnet" <rbarnet (AT) csaNOSPAMreno (DOT) org> wrote

It would be nice to just present the user with either normal or
largefonts,
and their choice of skin. In other words, it would be nice if the W3C
would
take away the "mutually exclusive" rule, and let you stack alternate sheet
upon alternate sheet ad infinitum (or ad nauseum). =)

I'm hereby moving this sub-thread to the more aptly named thread "Multiple
linked stylesheets", since this is really what is happening to my site, not
the cascade problem I originally thought it was. Thanks.

-- Richard