Search code examples
htmlcssstylesheet

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 rest of the page can use the main stylesheet. Any ideas?

Solution

  • 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:

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