Using two stylesheets on one page

[brettxw]

I have looked and read numerous pages in regard to doing this...I also found the information on here at this thread..

http://www.webmasterworld.com/forum83/1718.htm

I don't understand how this works...For instance, each CSS would have duplicate classes ie) content, container, footer etc...How would it know to use the "content class" that is on CSS #1, for the top of the site and then use the container, etc classes in the CSS #2 for the middle of the page (word press) then the footer class in the CSS #1 file for the footer?

[BeeDeeDubbleU]

Why would each CSS have duplicate classes? Wouldn't you just define the styles you want on each page? In other words if some pages are to be rendered different from others then link to the appropriate CSS on each page.

If linking to two or more style sheets on the same page then make sure that each of them defines unique styles for different purposes.

[alt131]

Hi brettxy, I'm not sure I understand the question exactly, but if you are asking how browsers choose between the styles in different stylesheets, the answer is they mostly don't - they are supposed to choose between whole stylesheets then apply the contents (styles) of whichever stylesheet has precedence. However the cascade still applies, plus browsers/versions have known errors which means they don't always get the priority correct.

Duplication could occur when changing the design for different media, say specify different font-size, colours, remove background/presentational images etc for printing, and enable that sheet by including the "media" descriptor [w3.org] in the link element:
<link rel="stylesheet" type="text/css" href="print.css" media="print">

There is often duplication when providing an alternate stylsheet that allows the user to change the default styling by using a "stylesheet switcher" or view>>>style. For example, extra large font with high contrast colours for easier reading by setting the rel attribute [w3.org] to alternate:
<link rel="alternate stylesheet" type="text/css" href="alternate.css" >

The other two types of stylesheets [w3.org] are persistent, which has no title, is enabled by default and always applied, and any number can be applied to the same document, and preferred which has a title, enabled by default, but only one can be applied per document:
<link rel="stylesheet" type="text/css" href="persistent.css">
<link rel="stylesheet" type="text/css" href="preferred.css" title="preferred">

So, in summary, if you did have multiple stylesheets with the same classes, but different declarations, the browser should decide on the basis of:
media (will only be applied to the correct media )
rel (alternate will onyx be applied if selected by the user),
title = no title = persistent will always be enabled
title= title = preferred will always be enabled

Good code management avoids "duplication", but on larger sites or with teams of coders, code is sometimes split into different sheets. For a small site probably just unnecessarily increases server hits. But using your example, put .content and .footer in css1.css, .container etc in css2.css. Make both persistent (or one persistent and one preferred) and the browser will apply the styles from each.

However, what if poorly maintained code creates duplications? For example, these sheets and styles:
<link rel="stylesheet" type="text/css" href="persistent.css"> h1 {color:red} h2 {color:blue}
<link rel="stylesheet" type="text/css" href="preferred.css" title="preferred"> h1 {color:green} h3 {color:tan}
<link rel="alternate stylesheet" type="text/css" href="alternate.css" > h1 {color:lime} h3 {color:silver}
<link rel="stylesheet" type="text/css" href="print.css" media="print" > h1, h2, h3 {color:black)
You should get:
h1 = green (preferred takes priority and last in cascade)
h2 = blue (no duplication, from the persistent, applied by default)
h3 = tan (preferred takes priority and last in cascade)

If the user selected an alternative sheet it should over-ride:
h1 = lime (alternate takes priority )
h2 = blue (no duplication from the persistent, applied by default)
h3 = silver (alternate takes priority )

If the user prints, the print sheet should over-ride so all the headers would be black.

However, some browsers muck up the relationship between preferred and persistent, and reversing the order means you can end up with:
<link rel="stylesheet" type="text/css" href="preferred.css" title="preferred"> h1 {color:green} h3 {color:tan}
<link rel="stylesheet" type="text/css" href="persistent.css"> h1 {color:red} h2 {color:blue}
h1 = red
h2 = blue
h3 = tan

Finally, if you accidentally include titles and create two preferred sheets, the first should take precedence, but some browsers wrongly apply the last:
<link rel="stylesheet" type="text/css" href="persistent.css" title="persistent"> h1 {color:red} h2 {color:blue}
<link rel="stylesheet" type="text/css" href="preferred.css" title="preferred"> h1 {color:green} h3 {color:tan}
h1 = red (but sometimes wrongly green)
h2 = blue (from persistent, no duplication)
h3 = blue (but sometimes wrongly tan)

[brettxw]

Wow! Thank you for taking the time to write that out! I'm gonna have to read it a few times to really understand it all.

To give a real example of what I am talking about...

I have word press set up on my site, which uses their own CSS (style.css) I have edited their header.php and added the code to 'get' and include my header.html file and navbar.html file. I also edited their footer.php to 'get' and include my footer.html. Well my .HTML's are using my sites CSS (styles.css). So when I look at my blog everything is all messed up because some classes in my CSS have the same name in the wordpress CSS.

ALSO...I just noticed that the site looks perfect in Firefox but in Chrome it is messed up. Example, i have a network bar at the top that has FB, twitter,youtube icons in the bar aligned on the left. Then in the middle I have some text and on the right I have "login | register ". Well in Firefox, looks normal but on Chrome the text in the middle is behind the FB, twitter icons on the left...Is it just code error on my part or something with Chrome not reading correctly?

[alt131]

Hi bretxw, thanks for the thanks.
What I wrote is good background knowledge, so I think always really handy to know - but now you've identified your problem a bit better, I suspect it won't give you the solution you need ;)

So when I look at my blog everything is all messed up because some classes in my CSS have the same name in the wordpress CSS.

So decide which css you want applied (yours or wordpress), and remove the styles from the css that you don't want applied. If that would mean you need to edit the wordpress css, and you can't, then change the class names you've used in your css (and in the html) so the "wrong" css doesn't get applied.

ALSO...I just noticed that the site looks perfect in Firefox but in Chrome it is messed up ...

Too many things could be causing this to guess, so best to provide some code!
Always validate your css and html if code isn't working as you want. Then check out the post pinned to the top of the forum called Guide to Posting HTML and CSS [webmasterworld.com] and post the html and css that will let us see what is happening in that part of the page.

[brettxw]

Alt - I will do that! I was actually just reading that pinned post to make sure I do not violate any TOS. My site is starting to turn into everyones site on this helpful website since my help is coming from here!

[brettxw]

Alright, I had my CSS validated and no errors appeared...Now I think my posting is okay and not violating TOS..If it does, I am very sorry and will re-read the terms to see what I did wrong and not to do again.


UPDATE : As I was about to copy and paste the CSS and HTML I had associated with this div class (that was making it look weird in Chrome)...I found my error! This was what I was going to post..

<div id="networkbar">
<div id="networkbar-inner-social">

I deleted all the HTML for the image icons to clear up space on here.

</div
<div id="networkbar-inner-left">

And that is when I saw the missing ">" .. I fixed that, uploaded the file and how amazing...It fixed the issue! haha. The things we can accomplish on our own if we just take a few minutes to slow down and look at the code line by line.

[alt131]

Your post is fine - we talk code here ;)

Jolly good spotting - very hard to notice those sorts of typos in your own code.

Fantastic the issue's solved, and I'd suggest put the html validator in your bookmarks/fav's as well as the css one.

[alt131]

Hi Brett, thanks for the information off-forum. I think I understand the issue better - maybe not ;).

The point of css is efficiency: Coders define a class and the styles will be applied to an element with that class name wherever it appears in the document. "Write once, use many" ;)
Css is not designed to have multiple sheets containing the same class names, with the browsers "told" to apply "class1" from stylesheet#1 in some parts of the page, and "class1" from stylesheet#2 in another.

As I understand it the pages are being assembled via php includes for a header, main content and footer. The header and footer are self-written, the main content is wordpress. Style is provided by two external css sheets. One is self-written, the other is from wordpress. Both contain the same classes so styles from one sheet are over-riding the other in undesired ways. Super-simplified example:

<link rel="stylesheet" type="text/css" href="my.css"> contains p.highlight {color:red}
<link rel="stylesheet" type="text/css" href="wordpress.css"> contains p. highlight {color:blue}

<!--header -->
<p class="highlight">Generated by myheader.php, supposed to be red per mycss.css</p>

<!-- main content -->
<p class="highlight">Generated by wordpress, supposed to be blue per wordpress.css</p>

<!-- footer -->
<p class="highlight">Generated by myfooter.php, supposed to be red per mycss.css</p>

I'm still not sure whether:
a) -- all .highlight should be red = don't want the wordpress style
b) -- all .highlight should be blue = don't want the mycss style
c) -- .highlight should be red/blue as above

But, if:
a) -- delete the classes and styles from wordpress.css
b) -- delete the classes and styles from mycss.css
c) -- change the names of the classes so there is no clash. The example would look then like this:

<link rel="stylesheet" type="text/css" href="my.css"> contains p.myhighlight {color:red}
<link rel="stylesheet" type="text/css" href="wordpress.css"> contains p. highlight {color:blue}

<!--header -->
<p class="myhighlight">Generated by myheader.php, will apply myhighlight styles and be red per mycss.css</p>

<!-- main content -->
<p class="highlight">Generated by wordpress, will apply .highlight and be blue per wordpress.css</p>

<!-- footer -->
<p class="myhighlight">Generated by myheader.php, will apply myhighlight styles and be red per mycss.css</p>

Is this closer to an explanantion that can be understood/deals with the issue?

[brettxw]

Hi Alt - Thank you again for taking the time to write all that up. I won't be able to really do much with CSS today...We were going to take our puppy in to get some tests done but when we went to pick her up to bring her to the car..She had passed away in her sleep :-/ So, needless to say..I'm heartbroken and just not really myself today. I'm sure later tonight I will get back into it and I can then re-read this and go from there.