Can the second of two consecutively invoked stylesheets override all styles defined in the first?

Question

If I have a HTML page that links to two stylesheets that are invoked like this:

<link rel="stylesheet" href="original.css" media="screen, projection" />
<link rel="stylesheet" href="override.css" media="screen, projection" />

If these two files define the exact same style names, is it true that original.css will have no bearing on the outcome of the styled page and that all styles will come from the styles defined in override.css?

The reason I ask is this: I have an original.css that I cannot modify and I do not want to touch the lines of code that invoke this file. Instead I would like to insert a call to my new file right after the original is called and override everything defined in the original. I'm not sure if this will work, whether it's advisable, etc.

Answer 1

Yes, that will work. You're right that it's not really advisable though. Instead of "not touching" the original lines of code, could you insert comment tags around it?

Answer 2

Yep, it sure can. That's the Cascading bit of Cascading Style Sheets.

I gotta ask though, why can't you just delete original.css, or not output it, or.... something? It seems like a very Big Hammer approach to completely override everything in original :-) If you do indeed output original.css and override.css, the browser is going to have to do a whole lot more work than if you were to just output override.css.

Answer 3

It's going to overwrite all that's overwritten but is going to complement everything is not the same but different applied info to a class or id or pseudo selectors or whatever. I mean, IE:

original.css -

p { margin: 4px 6px 10px 12px; }
h1 { font-size: 2.2em }

override.css -

p { padding: 6px; color: #666666; }
h1 { font-size: 1.5em }

What I said is that P is complemented in override.css because the styles are not conflicting each other. In the other hand, the H1 example is indeed overwritten and the two rules in each stylesheet are conflicting so the last declaration wins.

This is not as bad as one can think... I have just ended a couple of months ago a site in moodle that is a madhouse of styles and data mebeded an the like. The template used stylesheet data from the DEFAULT template, then from PAGE template, then from COURSE. When I tried to realize what style did what I was so stressed for not finding the correct piece of code to change for my own... I finally decided to attach a stylesheet of my own with the new overwritten styles and the new complemented ones. that made me save about two weeks digging in a designer-never-dreamt-inferno-of-code.

Hope this help you getting a clearer idea.

Bye.

Answer 4

A great example of this need is Sharepoint. Editing any theme will leave you with a whole host of changes you need to override from the core.css class.