Linking external stysheet from external stylesheets?

Is it possible to use @import url(“stylesheetB.css”); in a external stylesheet such that we have a cascading linking effect?

Eg: index.html will call stylsheet.css, which in turn calls stylesheetB.css

Reason being I want to keep the html doc as clean as possible without all the messy imports.

If you @import something, your basically openinig that file up. Cutting the CSS and pasting all of it exactly where you just imported it :).

Eg: index.html will call stylsheet.css, which in turn calls stylesheetB.css

Yes you can but be careful as it gets complicated if you have multiple imports. IE8 only allows six nested imports I believe.

3 :slight_smile:

Well I don’t believe this a good practice at all! Why do you think imports are messy?
IMO it is really better to link to the css files from the HTML page!

It can be messy trying to fitgure out what styles come from where and if you have selectors of the same specificity that match, it can be confusing to figure out which wi9ll take presedence :slight_smile:

Yes it’s only 3 - I stand corrected :slight_smile:

That means you have to be very careful indeed then.

Well I don’t believe this a good practice at all! Why do you think imports are messy?
IMO it is really better to link to the css files from the HTML page!

There’s a place for imports. Esp when there are a basic set of styles all pages share and then other styles that are much to different to go around undoing and overriding them. At least, that was the reason I needed to use @import once. The other option was having the special pages repeat a lot of CSS.

Well actually I don’t have a lot to import. I just have a main (stylesheet.css) and want to create another (customized.css) which overwrites some of the ones declared in the main.

I thought I might as well import customized.css at the bottom of main (since its over writting the main). But I’m not sure if its CSS specificity at work, it doesn’t seem to import.

I tried shifting the import statement to the start of the main stylesheet, and it does import.

Weird…does import have to be at the start? And, any tips on how to handle CSS specificity? Some times, I just couldn’t get the CSS overwrite to work properly.

You can have @import anywhere.

Just remember that whatever selectors you have (with the same specificity and targets the same element(s)) will always look to see which came later in the CSS.

Otherwise then just calculate specificity :slight_smile:

Ryan, weren’t there browsers somewhere who cared where you put @import (import specifically, rather than the rest of the @rules)?

The @import rules must precede all other rules (except the @charset rule, if present).

I remember something also rather browser-specific… some sort of bug.

It must have been the “media type” you can specify in IE.

I must have wrote that with no sleep. Paul is correct. @import must be at the top of your CSS file.

For some reason I was thinking that PHP include()'s were the same as @import…rule wise anyway…bah no more all nighters…