How to determine the priority of css files in info file for a theme?

Question

I have several css files in a theme info file. Suppose i have two definitions of h2 in different files? How to configured the files so I manage to get the h2 definion I want?

---

I edited the question as I do not get a solution yet. The question refered as an answer is problaby one of the reasons. So I first set the order of the files oke. They are now oke. Other changes are reflected.

So specific.... I now have two H2 definitions in 1 css file.

h2 {
    font-size: 19px;
}

and

.page-shop .view-header h2 {
    font-size: 100px !important;
}

But still the first is applied in the shop page..

Any suggestion?

For everybody who is reading this; I found my solution:

I'm using Sublime Text editor for css styling. As everything in the syntax had the good color I thought the file is build up good. But in some try and error I saw one line like below:

form-item ( font-size: 10em;}

Note that instead of openening with a { it is opening with a (

And because of this the rest of the css file is not processed well.

Answer 1

The CSS files are processed in order, so if your .info file looks like this:

stylesheets[all][] = css/foo.css
stylesheets[all][] = css/bar.css

Then the styles from foo.css will be included before those from bar.css. The same applies whether each CSS file is included separately, or whether they're aggregated.

If you're still unsure which rule will be applied at that point, you need to read up on CSS specificity, as Drupal doesn't affect it.