[Solved -9 Answers] CSS – Is it possible to include one CSS file in another

PROBLEM :

Is it possible to include one CSS file in another?

SOLUTION 1

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).

SOLUTION 2

Importing CSS file into another CSS file is possible.

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

[pastacode lang=”css” manual=”%40import%20%22mystyle.css%22%3B%0A%40import%20url(%22mystyle.css%22)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]

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.

SOLUTION 3

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.

SOLUTION 4

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

[pastacode lang=”css” manual=”%40import%20url(‘%2Fcss%2Fcommon.css’)%3B%0A%40import%20url(‘%2Fcss%2Fcolors.css’)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 5

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.

SOLUTION 6

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

[pastacode lang=”css” manual=”%40import%20url(%22mycssfile.css%22)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]

or

[pastacode lang=”css” manual=”%40import%20%22mycssfile.css%22%3B” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 7

CSS :

[pastacode lang=”css” manual=”%40import%20url(‘%2Fcss%2Fheader.css’)%20screen%3B%0A%40import%20url(‘%2Fcss%2Fcontent.css’)%20screen%3B%0A%40import%20url(‘%2Fcss%2Fsidebar.css’)%20screen%3B%0A%40import%20url(‘%2Fcss%2Fprint.css’)%20print%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 8

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

We can include only one main.css file

[pastacode lang=”css” manual=”%40import%20url(‘style.css’)%3B%0A%40import%20url(‘platforms.css’)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 9

We can try this :

[pastacode lang=”css” manual=”%40import%20url(%22fineprint.css%22)%20print%3B%0A%40import%20url(%22bluish.css%22)%20projection%2C%20tv%3B%0A%40import%20’custom.css’%3B%0A%40import%20url(%22chrome%3A%2F%2Fcommunicator%2Fskin%2F%22)%3B%0A%40import%20%22common.css%22%20screen%2C%20projection%3B%0A%40import%20url(‘landscape.css’)%20screen%20and%20(orientation%3Alandscape)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]