homepage Welcome to WebmasterWorld Guest from 54.197.111.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Using different stylesheets that don't conflict
matthewamzn




msg:3538084
 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.

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

 

surrealillusions




msg:3538109
 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




msg:3538144
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved