Is it possible to include one CSS file in another?

Yes,its possible to include one css file in another.The @import rule must precede all other rules (except the @charset rule);

Additional @import statements require additional server requests.
Aggregate CSS into one file to avoid multiple HTTP requests.
That is, copy the contents of base.css and special.css into base-special.css and reference only base-special.css).

Importing CSS file into another CSS file is possible.

It must be the first rule in the style sheet using the @import rule.

Css Code
@import "mystyle.css";
@import url("mystyle.css");

The only caveat is that older web browsers will not support it. In fact, this is one of the CSS ‘hack’ to hide CSS styles from older browsers.

The @import url(“base.css”); works fine but that every @import statement is a new request to the server.

This might not be a problem for you, but when optimal performance is required you should avoid the @import.

The CSS @import rule does just that. E.g.,

Css Code
@import url('/css/common.css');
@import url('/css/colors.css');
[ad type=”banner”]

In some cases it is possible using @import “file.css”, and most modern browsers should support this, older browsers such as NN4, will go slightly nuts.

Note:

The import statement must precede all other declarations in the file, and test it on all your target browsers before using it in production.

yes it is possible using @import and providing the path of css file e.g.

Css Code
@import url("mycssfile.css");

or

Css Code
@import "mycssfile.css";

CSS :

Css Code
@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;

We have created main.css file and included all css files in it.

We can include only one main.css file

Css Code
@import url('style.css');
@import url('platforms.css');
[ad type=”banner”]

We can try this :

Css Code
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

Categorized in: