Making Different Syle Sheets Apply To Different Areas Of The Page

I have various css's basically I want to determine what stylesheet each section of the page uses, for example I want my navigation bar to use the navigation stylesheet where the re

Solution 1:

You cannot do this. A stylesheet applies to the entire page. You must simply make your selectors specific enough so that styles are applied only to the intended elements.

In your example, you might put your navigation items under a <ul id="nav">. All of your navigation-specific styles should start with a #nav selector, to make sure they aren't accidentally applied to any other elements on the page:

#navli { color:#000; }
#navli.active_item { color:#f00; }
/* etc */

Solution 2:

Either use iframes, or use css classes. Remember, css classes can be combined:

<divclass="class1 class2 and-so-on">...</div>

Therefore you can use one stylesheet which only targets class1, one which only targets class3... and import all your stylesheets normally.

Solution 3:

If your CSS is not too huge, you should combine it in one file. This will improve your download speed and make it easier on the user.

If you would like to keep the styles separate, use comments in your CSS, e.g.

#######NAVSTYLES######

.navli {something:something;}
.navlia {something:something;}

######MAINSTYLES######

#main#wrapper {something:something;}

Solution 4:

If you wanted to seperate out your css to make it easier to manage. You could separate your css into seperate files and call the using @import url();. For example:

core.css would be like so:

//Navigation styles
@importurl("navigation.css");

//Banner styles
@importurl("banner.css");

//Footer styles
@importurl("footer.css");

This would however create one style sheet, which includes the separate referenced ones.

Solution 5:

This is not possible, since the CSS apply to the entire page. To achieve what you want, you should divide your page into different sections, by giving a unique ID to each section for example. This way you can apply separate styles to separate sections of your page.

For example your navigation div could have id="navigation-bar", then in the CSS you will write:

#navigation-bar {/* styles here will apply only to navigation-bar and elements inside it */

}

And so on...