Can you make Multiple CSS files add to not overwrite

[LouiseMarie]

Hi,

I've got two external css files added to a page on a website. The reason there are two files is because one css file contains all the positioning information and the other file contains all the colour information. The reason for having the two files seperate is because we are using a wizard to generate the colour css file so that the website can be styled by a client.

The problem i'm having with it is that the colour css file doesn't contain any positioning styles and when the css file overwrites the first one all i get are the colour properties.

Is there any way of making the second css file ADD TO the properties of the first style sheet instead of overwrite it?

thanks in advance

[rocknbil]

Check out Fotiman's advice in this recent thread [webmasterworld.com], you may fix it by just putting the color link first in your document source.

[LouiseMarie]

Thanks for your reply. I take it you mean have the css for the colour properties as inline style instead of an external stylesheet?

I'm going to speak to our developers and see if they can change the way the system gen file is created but thank you for your advice and i'll let you know if i get this fixed.

thanks

[Fotiman]

CSS styles will be applied cumulatively, meaning if I define styles in one file like this:

#myElement { position: absolute; top: 0; left: 0; }

And then I define this style in a separate file:

#myElement { color: blue; background: white; }

Then when both of those stylesheets are included on the same page, the element with id "myElement" will end up with both sets of styles applied (it will be positioned absolutely and have color blue with background white). It doesn't have anything to do with inline styles (and in general, I would suggest avoid using inline styles as you lose a lot of the benefits of CSS, especially with regards to maintenance).

[LouiseMarie]

I always try to avoid inline style where I can thats why i'm using external style sheets.

Some styles were being picked up from the main.css file and some weren't so I added all the positioning css to the colours file and then slowly started removing each item.

turns out it's my fault for not uploading the latest version of the file to source control before building the project so it was referencing style classes it thought weren't there!

thanks for your help anyway :)

[Fotiman]

Ah, glad you got it sorted. :)