I'm stunned by a simple thing that I want to accomplish but does not work. I have a website and I want it to support themes, which are a named set of CSS + images. No matter which theme is selected, I always include the main CSS file, which is the default theme. On top of that I'm loading a second stylesheet, the one that is theme-specific, like so:

<link rel="stylesheet" type="text/css" href="css/main.css" title=main" media="screen" />
<link rel="stylesheet" type="text/css" href="themes/<?= $style ?>/css/<?= $style ?>.css" title="<?= $style ?>" media="screen" />

My idea is that the theme specific css should not be a full copy of the main css file. Instead, it should only contain CSS rules that overrule those of the main.css file. This makes themes much smaller and easier to maintain.

I thought I could simply load two external stylesheets after each other and that for conflicting rules it will always use the theme specific css, the second file.

However, it does not seem to work. If I make a dramatic styling change in the theme file then it has no effect. If I then comment the main CSS file, the theme CSS does have effect.

Was I too naive in expecting this to work like this? I know I can use inline styles to overrule anything, but I prefer a setup like this if possible.