@import directive for <linked> sheets

[madcat]

Have you used the @import directive within another stylesheet? @import must be used within a stylesheet- whether embedded, linked or @imported. When you include them in the linked or @imported sheet- do you just use the cascade to fuse the styles? What are some advantages to doing so?

[topr8]

i thought the main advantage was to use it to overwrite styles written for nn4 as it doesn't recognise the @import function.

write a nn4 friendly style and change the attributes for other browsers using @import as later styles have preference

[Nick_W]

I like to use it for different 'sections' of a site.

If the user sees the same style left menu as the same as every other page they may not notice that it's 'section specific' so I like to #improt a new set of colors for these elseemts...

Nick

[tedster]

I've sworn off importing a stylesheet from WITHIN another stylesheet. It buries the relevant code down a chain of documents and that makes it hard to maintain.

It's easier for me to use several linked styles in the head section - I can see at a glance where the styles are coming from, and it allows for easy style "modules" for different sections or types of pages, in the manner Nick mentioned.

[Craig_F]

I'd really like to change colors for each section of my site but don't really get how it's done.

What confuses me is that I'd really like to use one template for all of these sections, and I don't see how I can switch colors if the styles are already specified.

I can clearly see how this can be done with different templates for each section, but it doesn't sound like that's what you guys are doing. Could you explain more?

Thanks - Craig

[Nick_W]

Hi Craig,

What you're wanting to do is quite simple. It relies on the the cascade [w3.org] of your stylesheets.

For example: Say you have a menu that's contained in a div like this:

[pre]
<div id="menu">
 Menu stuff here...
</div>[/pre]

and in your regular stylesheet you have:

[pre]
#menu {
 background-color: #000000;
 color: #FFFFFF;
}[/pre]

When you have a page where you need to override that rule you can do this:

[pre]
<link rel="stylesheet" type="text/css" 
href="normalstyles.css" />
<style type="text/css">
 @import url(override.css);
</style>[/pre]

and in override.css you would, override the normal rule.

[pre]
#menu {
 background-color: #FFFFFF;
 color: #000000;
}[/pre]

This works because the imported sheet is closer to the element you are styling (not a rule just a way of simple explanation, see w3c for more..) so is more important.

With me? ;)

Nick