Re: [css-d] should this class override my other one?

[Claude Needham]

On Tue, Dec 14, 2010 at 7:58 PM, Tim Climis  wrote:
> No they don't.  Take your style attribute out.  Now move it to an
> external style sheet.
>
> Put the link to the style sheet before the style tags, and your text will
> be green. So far, things are doing what you expect...
>
> But now, put the link to the style sheet AFTER the style tags.  The text
> is now red.
>
> As Jukka said, style tags and external sheets have the same level in
> the cascade order, so it only matters which order they're in -- not
> what file.
>
> ---Tim

To clarify this in my own head I have divided "cascade" into two parts:

 1) Assembly of a virtual consolidated style sheet
 2) Calculating selector's specificity

I know the real situation is a bit more complex. But this has helped
me to keep the various parts of the process somewhat understandable.

The question of external style sheet reference before or after
internal style relates to assembly of the consolidated style sheet.

I have found in every test I've made that a subsequent definition with
the exact same specificity will over-write a previous one. The only
exceptions to this resulting from the use of !important. Which is the
expected behavior.

I don't have the link (sorry) but there was a very interesting article
written a while back detailing the race conditions that can happen
with various combinations of @include and link. (I bet the author is
on this list somewhere.) Again all of this contributes to the assembly
process.

Once the consolidated style sheet has been assembled then issues of
selector specificity will come into play. Others know the area of
selector specificity better than I could ever hope to.

The only piece of the puzzle I would proffer to the list is possible
clarity to the discussion if we divide it into the 1) accumulation
into a single consolidated style sheet and 2) resolution of precedence
and priorities of various selectors.

Regards,
Claude
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] should this class override my other one?

[Eric A. Meyer]

At 12:51 AM + 12/15/10, John D wrote:

Any way we seem to have gone outside the original question and so we 
should end here before groups-papa tells us off to shut up.


   The List Mom disagrees; this is an interesting discussion of the 
cascade, it does have bearing on the original question, and I would 
in no way want to shut it down.


--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
  -- Martina Kosloff (http://mako4css.com/)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] should this class override my other one?

[John D]

Now this will take me another 24 hours to digest and it is getting late, and 
cold in London UK.


> And it can boogle the mind...
> 
> ~d

  
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] should this class override my other one?

[John D]

> Not true. In the case of styles declared in a 

Re: [css-d] should this class override my other one?

[David Laakso]

There is a priority order. to test this try this...> 



And it can boogle the mind...

~d

--
http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] should this class override my other one?

[Bobby Jack]

--- On Wed, 12/15/10, John D  wrote:

> Similarly, header styles takes priority over external style sheets

Not true. In the case of styles declared in a 

Re: [css-d] should this class override my other one?

[John D]

> There is no such priority order. The cascading order is much more complex 
> and almost always misunderstood

There is a priority order.  to test this try this:

1) create a bsic page with this code:

This should be red despite header style says green

2) Now put the following code in header:


p {  color: green;}


Now let me know what is the color of your paragraph.  You will notice that it 
is red because inline style has taken priority over the header style.

You can now try the same exercise using external styles and you will find that 
inline style always takes a priority.  Similarly, header styles takes priority 
over external style sheets,

hth


  
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] should this class override my other one?

[Jukka K. Korpela]

John D wrote:


The priority order of styles is as follows:

1.Browser default
2.External style sheet
3.Internal styles via   
4.Inline styles <


There is no such priority order. The cascading order is much more complex 
and almost always misunderstood, more or less:

http://www.w3.org/TR/CSS21/cascade.html#cascading-order


Therefore, your style within   No 4 will take priority
over external style sheet called by the link tag.


You mean No 3, right? But it's still wrong. Other things being equal (and 
they usually aren't!), the order of specifying CSS rules becomes relevant, 
but the order depends on the order of 

Re: [css-d] should this class override my other one?

[John D]

The priority order of styles is as follows:

1.Browser default
2.External style sheet
3.Internal styles via   
4.Inline styles <

Therefore, your style within   No 4 will take priority over 
external style sheet called by the link tag.  I am not sure how this affects 
your code because you haven't given us the skeleton of your table code.  The 
above should be read as 4 takes priority over 3; 3 takes priority over 2 etc 
etc.   You work in reverse.


hth



I have a table in which I wanted to center the content of 2 of its 5 
columns.  So I made a class like this:


td.center {text-align:center;}

I put this in the 

Re: [css-d] should this class override my other one?

[Jukka K. Korpela]

Angela French wrote:


.center
{ display: block;
 text-align: center;
 margin: 0 auto;
}

My question is this.  It appears in FF that .center was being applied
to my td in addition to my td.center.  But not so in IE.


How did you draw the conclusion whether .center was or was not applied? In a 
simple test, I see no essential difference between IE and FF in this issue.


The declaration text-align: center cannot have observable effect when 
another CSS rule says the same. The margin declaration has no effect for a 
table cell. I wonder what display: block should do to a table cell, but some 
browsers might conceivably turn the cell into a mere block, and then margin 
might have an effect.


Can you post the URL and identify the browser versions you used?

--
Yucca, http://www.cs.tut.fi/~jkorpela/ 


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] should this class override my other one?

[Bobby Jack]

--- On Mon, 12/13/10, Angela French  wrote:

> From: Angela French 
> Subject: [css-d] should this class override my other one?
> To: "'css-d (css-d@lists.css-discuss.org)'" 
> Date: Monday, December 13, 2010, 4:50 PM
> 
> ... I made a class like this:
> 
> td.center {text-align:center;}
> 
> ... The .css file that was called with a link tag, had the following 
> class in it:
> 
> .center
> { display: block;
>   text-align: center;
>   margin: 0 auto;
> }
> 
> My question is this.  It appears in FF that .center
> was being applied to my td in addition to my
> td.center.  But not so in IE.  Can anyone explain
> this to me?

Hi Angela,

Both should be applied. Any selector (e.g. ".center") in any CSS file or head 
section, that matches a given element, should apply to that element.

td.center happens to be more specific than .center, but that's only relevant 
for overriding individual CSS properties that are the same. In this case, the 
property declaration is exactly the same anyway, but:

.center { text-align: left; }

should not have any effect, since td.center { text-align: center; } is more 
specific. Here's a short example demonstrating (at least some of) the relevant 
issues:

/* 1 */  td.center { font-size: 120%; background-color: red; }

/* 2 */  .center { color: red; font-size: 100%; }

/* 3 */  .center { color: blue; }

/* 4 */  body td.center { background-color: green; }

The above CSS will affect a '' like so:

1. color: blue - declarations 2 and 3 match and are equally specific, so the 
second one will apply (the latest equal match always applies)

2. font-size: 120% - since the first declaration is more specific than any 
later, its font-size wins out

3. background-color: green - the 4th declaration is more specific, so overrides 
the 1st

Remember that:

.foo { font-size: 10px; color: red; }

is just a shorthand for:

.foo { font-size: 10px; }
.foo { color: red; }

and is exactly equivalent. So overriding according to specificity applies to 
individual attribute/value declarations, not entire blocks of declarations.


- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] should this class override my other one?

[Angela French]

I have a table in which I wanted to center the content of 2 of its 5 columns.  
So I made a class like this:

td.center {text-align:center;}

I put this in the