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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
lovelf
Forum Contributor
Posts: 153
Joined: Wed Nov 05, 2008 12:06 am

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

Post 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.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

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

Post 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.
lovelf
Forum Contributor
Posts: 153
Joined: Wed Nov 05, 2008 12:06 am

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

Post by lovelf »

Thanks for clearing it out.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

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

Post 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;
}
Post Reply