Is it possible to include one CSS file in another?

user_460927 0
Viewed 550044

Is it possible to include one CSS file in another?

css
17 Answers

Yes:

@import url("base.css");

Note:

  • The @import rule must precede all other rules (except @charset).
  • Additional @import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css.
Kevin_Read_233030

Yes. Importing CSS file into another CSS file is possible.

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

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

Refer to this list for browser support.

ronin_19870

The @import url("base.css"); works fine but bear in mind 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.

user_226730

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

@import url('/css/common.css');
@import url('/css/colors.css');
user_16000

Yes.

@import "your.css";

The rule is documented here.

Gordon_Wilson_230710

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.

seanb_33540
user_104680

For whatever reason, @import didn't work for me, but it's not really necessary is it?

Here's what I did instead, within the html:

  <link rel="stylesheet" media="print" href="myap-print.css">
  <link rel="stylesheet" media="print" href="myap-screen.css">
  <link rel="stylesheet" media="screen" href="myap-screen.css">

Notice that media="print" has 2 stylesheets: myap-print.css and myap-screen.css. It's the same effect as including myap-screen.css within myap-print.css.

user_17079040
Related