Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Multiple CSS Style Sheets?
Old 11-06-2008, 04:40 PM Multiple CSS Style Sheets?
Experienced Talker

Posts: 30
Trades: 0
I'm currently in the process of designing my first full fledged site. The one thing I'm struggling with is while I want the overall look and feel of the site to be the same, some of the inter-page layout needs to be different to accomdate the variety of content between pages.

Is it acceptable to use two style sheets linked to one html page?

Also, would changes made in the second linked sheet over rule the 1st page?
samo1215 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 11-06-2008, 08:17 PM Re: Multiple CSS Style Sheets?
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
You can definitely use more than one style sheet, though you still might be able to solve your problem with one style sheet.

One thing you might do is set up one style sheet with all the styles that will be consistent across pages and then set up different style sheets for the styles that differ. You might end up with

main.css
about-us.css
contact.css

The names could be anything of course, but with the above main.css would be the consistent styles and about-us.css and contact.css would be style sheets specific to those pages only. This solution wouldn't require one style overriding another since you would only include the css files necessary for the page.

As far as styles overriding each other that's what the cascade in cascading style sheets is all about. Here's a page from w3org on cascading and inheritance with the details.

A few simple concepts:

If you have

h2 {color: red}
h2 {color: blue}

in that order your h2s will be blue. Whichever comes last (or closest to the actual h2 element) is the style that gets used. So if you have two style sheets with different rules on the same elements, classes, or ids, the one you list second will likely be the one that takes precedence.

I say likely because of the specificity rules. While two rules may look the same, they may not be.

p.red {color: blue}
.red {color: red}

aren't the same The first one is more specific and so any paragraph assigned a class of red would actually display blue text given the above two rules.

See if the w3.org page clears it up. Specificity can be a little confusing and you may not need to worry about it when setting up your site, but it's still good to know.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 11-06-2008, 11:03 PM Re: Multiple CSS Style Sheets?
Experienced Talker

Posts: 30
Trades: 0
Thanks for the response. I'm not sure I 100% understand. In regards to the first part of your response, are suggesting I make completely different style sheets for different pages so that each page only has to load one style sheet. I don't object but I thought the nice thing about using an external style sheet was the ability to make changes to one sheet and have it alter several pages at once.

I plan on keeping most of the page the same, it's really just the main content area that will change from page to page. Hence, I was wondering if I could make a main style sheet for every page and then load an additional one that would cover just that main content area for each separate page.

As for the second part of your response, I know that within style sheets whatever the last rule is will be the one executed, what I was wondering is if I link to two separate style sheets, will rules in the 2nd style sheet (by 2nd I mean the one that is actually listed one line below the other style sheet) be able to over ride things listed in the 1st or if because they are two separate sheets they cannot effect change on each other?

Thanks again for your help, I really appreciate it !
samo1215 is offline
Reply With Quote
View Public Profile
 
Old 11-07-2008, 07:36 PM Re: Multiple CSS Style Sheets?
jason_bristol's Avatar
Ultra Talker

Latest Blog Post:
New site - ConnectFrench.com
Posts: 310
Name: Jason Eyermann
Location: england bristol
Trades: 0
Yes I do the same. I always use main style sheet that I call stylesheetmain then below that I may use other style sheets that may just be used 2-3 times that will override some of the changes to stylesheetmain
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE
jason_bristol is offline
Reply With Quote
View Public Profile Visit jason_bristol's homepage!
 
Old 11-07-2008, 09:36 PM Re: Multiple CSS Style Sheets?
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
With the first part no I wasn't suggesting to create a new stylesheet for every page. What it sounds like you need from your description is that a few pages will need a few styles that differ. So maybe you want an h2 green on one page and blue on another. But on all pages your h1's might be red.

You could create a single stylesheet for the h1 and all other tags that will remain consistent across pages. And then have another stylesheet with the h2 that might want to be different on some pages. You could have alternative stylesheets for some styles that are included only where needed.

It would be similar to writing some styles in the <head> of individual pages.

However I don't think you'll need to do that. One thing you might do is use a different id or class on the interior page(s) that need to be different. So if your content is generally wrapped with:

<div id="main-content">
content here
</div>

you could change that to

<div id="main-content-about">
content here
</div>

for your about page and then just style things inside that div in your main style sheet.

You could have:

#main-content h1, #main-content-about h1 {styles here}

where the two should be the same and then write out some separate styles where they need to differ.

#main-content h2 {styles here}
#main-content-about h2 {styles here}

and have everything be in the same stylesheet you include on every page.

There are really a few ways to solve the problem. The choice of which to use will come down to some of the details. Hopefully the above works, but if not feel free to share more details about what will be changing on the interior pages or even better post a link to the site if it's online somewhere.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 03-26-2009, 03:11 PM Re: Multiple CSS Style Sheets?
daifuku's Avatar
Junior Talker

Posts: 4
Trades: 0
Thanks to the topic starter, actually i'm also having the same problem with samo on combining the multiple css in one html. The 2nd css overwrite the first css. Someone advise me to set a different class on it but how to do it?

The problem is the 2nd css is actually a pop up page view and it also have a
body{code}..so how to create a class to differentiate it?

This is my first css(main page):
1st css

and 2nd css(the pop up view):
2nd css

thanks before hand..
daifuku is offline
Reply With Quote
View Public Profile
 
Old 03-26-2009, 03:24 PM Re: Multiple CSS Style Sheets?
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Lets see the live site, have to see the HTML too.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-26-2009, 03:38 PM Re: Multiple CSS Style Sheets?
daifuku's Avatar
Junior Talker

Posts: 4
Trades: 0
ok this is the current website im working with:

The main:
http://skull.prophp.us/babyskull/file1.txt

2nd for the pop up view page:

http://skull.prophp.us/babyskull/file2.txt

note that i want the pop up thingy appear once i click at the "preview pack". After i combine the css of file 2 into file 1 its overwrite.

The pop up view also have js script (its jquery)

Thanks

Last edited by daifuku; 03-26-2009 at 03:40 PM..
daifuku is offline
Reply With Quote
View Public Profile
 
Old 04-01-2009, 11:26 PM Re: Multiple CSS Style Sheets?
daifuku's Avatar
Junior Talker

Posts: 4
Trades: 0
anyone can help me here?? ive already post my codes there but no feedback..
daifuku is offline
Reply With Quote
View Public Profile
 
Old 04-02-2009, 02:09 PM Re: Multiple CSS Style Sheets?
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
That's because I cannot get your text files, your site is blocked from my end.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 04-03-2009, 07:20 AM Re: Multiple CSS Style Sheets?
Super Moderator

Posts: 1,576
Location: Kokkola, Finland
Trades: 1
daifuku better if you post a url - and if it's not live somewhere then make it live
davemies is offline
Reply With Quote
View Public Profile Visit davemies's homepage!
 
Old 04-07-2009, 02:42 AM Re: Multiple CSS Style Sheets?
daifuku's Avatar
Junior Talker

Posts: 4
Trades: 0
Blocked? its a txt file..how come huhu ..
hmmh k then here is my website : http://www.skulblakashven.com

and that was my main page. I want to integrate this jquery smooth pop up http://www.skulblakashven.com/popup.html to my main page.

The problem is when i combine the css its overide the others. I tried to reverse the pop up css to the top and another problem occur.. my preview pack button dont want to appear.
daifuku is offline
Reply With Quote
View Public Profile
 
Old 04-07-2009, 11:59 AM Re: Multiple CSS Style Sheets?
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Quote:
Blocked? its a txt file..how come huhu ..
It's your SITE that's blocked, not the file - company proxy is very tight.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 04-08-2009, 03:34 AM Re: Multiple CSS Style Sheets?
Average Talker

Posts: 28
Name: TJ Phippen
Trades: 0
You COULD use multiple style sheets, but personally I'd rather just do something like:

<body id="about">

#about h3 {
__________________
| | TJ PHIPPEN | |
Please login or register to view this content. Registration is FREE

| Definition Redefining Speed, Quality & Satisfaction!
| Call Me: (435) 225-6121 | Email Me:
Please login or register to view this content. Registration is FREE
siforek is offline
Reply With Quote
View Public Profile
 
Old 04-13-2009, 02:36 AM Re: Multiple CSS Style Sheets?
Experienced Talker

Posts: 47
Name: Bryan Williamz
Trades: 0
Your website is blocked due to the strict proxy
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE

cdesignz is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Multiple CSS Style Sheets?
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.40113 seconds with 12 queries