Welcome to WebmasterWorld Guest from 23.22.182.29

Forum Moderators: not2easy

Message Too Old, No Replies

Using different stylesheets that don't conflict

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

Full Member

10+ Year Member

joined:Jan 27, 2005
posts: 229
votes: 0


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

<html>
<body>

<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.

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

Preferred Member

5+ Year Member

joined:Dec 10, 2007
posts:507
votes: 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.

:)

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 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.