Using different stylesheets that don't conflict

Forum Moderators: not2easy

Message Too Old, No Replies

Using different stylesheets that don't conflict

matthewamzn

7:34 pm on Dec 31, 2007 (gmt 0)

Can parts of a webpage use different stylesheets? The different parts need to ignore the other stylesheets because there are conflicting terms.

<CSS 1>
header
</CSS 1>

<CSS 2>
forum
</CSS 2>

<CSS 1>
footer
</CSS 1>

</body>
</html>

I'm trying to wrap my forum so it looks like the rest of the site.

surrealillusions

8:14 pm on Dec 31, 2007 (gmt 0)

I dont think its possible as the browser reads the last CSS file and goes by whats in there. It reads a css file linked to in the head section, then any seperate css styles written in the <style> tags in the head, and then inline styles. So, inline styles will take preference over any styles written to the same id or class in the head section or seperate css file.

Why not just stick it all into one css file? Just use different id's and classes. I forget which one cant be used more than once for the same element. I think its id. You can use a class as many times as you want. I think. Hopefully someone will clarify this.

Xapti

9:10 pm on Dec 31, 2007 (gmt 0)

Heheh... the whole point of CSS is you can style different things like that. There's absolutely no reason to have different sheets affect different areas on the same page!

Just do <div class="style1"></div>
<div class="style2"></div>
<div class="style3"></div>
<div class="style4"></div>
although the names of the classes should be semantic idealy... so bad names would be "style5","blueborder" or "smallfont", good ones "noticemessage", or "headingarea".

in your css file, you can then put the rules:
.style1{font-family:Arial;color:blue;background-color:pink}
.style1 form{border:blue}
.style1 a{font-family:courier;color:purple;text-decoration:none}

All content mentioned in a style cascades down into child elements... it is quite simple to use.