Page 1 of 1

If two stylesheets have the same title, 2nd overrides 1st?

Posted: Tue Jan 06, 2009 4:52 pm
by lovelf
Hi, if I have this in my code:

Code: Select all

<link href="http://www.website.com/styleone.css" rel="stylesheet" type="text/css" title="default" media="screen">
<link href="http://www.website.com/styletwo.css" rel="stylesheet" type="text/css" title="default" media="screen">
Both stylesheets have the same title, "styletwo.css" overrides completely styleone.css ?

In IE and FireFox I do not get to switch between them so I guess styletwo overrides styleone but I am not certain that this is what is happening.

Re: If two stylesheets have the same title, 2nd overrides 1st?

Posted: Tue Jan 06, 2009 5:01 pm
by Eran
The title attribute is meaningless here, and basically useless on a stylesheet declaration.

If both stylesheets declare the same selectors (tags, classes, ids), then the stylesheet loaded last will always take precedent on other stylesheets. In this case, styletwo.css will override any selectors it contains that appear also in styleone.css, because it is loaded after.

Re: If two stylesheets have the same title, 2nd overrides 1st?

Posted: Wed Jan 07, 2009 6:54 pm
by lovelf
Thanks for clearing it out.

Re: If two stylesheets have the same title, 2nd overrides 1st?

Posted: Wed Jan 07, 2009 7:06 pm
by Luke
Just to make sure this is clear, in css, the order of declaration only matters for the SAME selectors. For instance:

The following CSS uses this html:

Code: Select all

<div id="content">
    <p class="excited">This is a really excited paragraph!</p>
</div>
In this case, the second one is used

Code: Select all

.excited {
    font-weight: bold;
    background-color: yellow;
    color: red;
}
 
.excited {
    font-weight: normal;
}
In this case, the first one is used because the first is more "specific"

Code: Select all

#content .excited {
    font-weight: bold;
    background-color: yellow;
    color: red;
}
 
.excited{
    font-weight: normal;
}