874

Is it possible to include one CSS file in another?

2
  • 33
    Just an fyi, doing this does not save an HTTP request. It just saves you from having to include the imported .css file somewhere else. Mar 14, 2012 at 4:32
  • 2
    I would be almost the same as including another CSS before and not the best of practices Feb 28, 2014 at 11:28

17 Answers 17

1204

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.
0
167

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.

0
45

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.

2
  • 3
    aren't CSS files cached? So it's only going to request the file once? seems trivial to worry about.
    – endolith
    Dec 26, 2014 at 19:49
  • 1
    If you aren't minifying your css to one file then yeah you are correct but once it is then you are just calling one css file. Correct me if I'm wrong of course.
    – mjwrazor
    Jan 6, 2017 at 17:08
34

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

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

Yes.

@import "your.css";

The rule is documented here.

0
13

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.

9

Yes, use @import

detailed info easily googled for, a good one at http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

7

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

@import url("mycssfile.css");

or

@import "mycssfile.css";
6

@import("/path-to-your-styles.css");

That is the best way to include a css stylesheet within a css stylesheet using css.

6

The "@import" rule could calls in multiple styles files. These files are called by the browser or User Agent when needed e.g. HTML tags call the CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
</body>
</html>

CSS File "main.css" Contains The Following Syntax:

@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);

To insert in style element use createTexNode don't use innerHTML but:

<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
    @import 'fineprint.css' print;
    @import 'bluish.css' projection, tv;
    @import 'custom.css';
    @import 'chrome://communicator/skin/';
    @import 'common.css' screen, projection;
    @import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>
1
  • Just to point out, while @hylp is pointing out that it's possible to override classes from imports (classes projection and screen?) this is usually never a good thing to do. ;)
    – Tcll
    Jan 5, 2017 at 20:27
3

Import bootstrap with altervista and wordpress

I use this to import bootstrap.css in altervista with wordpress

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

and it works fine, as it would delete the html link rel code if I put it into a page

2

Yes You can import easily one css to another (any where in website) You have to use like:

@import url("url_path");
2
@import url('style.css');

As opposed to the best answer, it is not recommended to aggregate all CSS files into one chunk when using HTTP/2.0

1
  • This is only true for multiple link tags -- http2 will do multiplexing -- but for @import statement they still get executed in series.
    – user31782
    Aug 14 at 5:31
1

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

We can include only one main.css file

@import url('style.css');
@import url('platforms.css');
0

sing the CSS @import Rule here

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;
0
-1

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.

1
  • 6
    No, this is not correct. This is including multiple CSS files from within an HTML file, not including a CSS file from within another CSS file.
    – TylerH
    Aug 22, 2019 at 13:53
-4

I stumbled upon this and I just wanted to say PLEASE DON'T USE @IMPORT IN CSS!!!! The import statement is sent to the client and the client does another request. If you want to divide your CSS between various files use Less. In Less the import statement happens on the server and the output is cached and does not create a performance penalty by forcing the client to make another connection. Sass is also an option another not one I have explored. Frankly, if you are not using Less or Sass then you should start. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

7
  • 1
    THe client will do another request, not another connection. And for the quality it is a good way to use import css. It is much better to have those imports instead of a big css file which grows and grows with the project...
    – YvesR
    Mar 6, 2013 at 16:50
  • 3
    This is the recommendation of both Google (developers.google.com/speed/docs/best-practices/…) and Yahoo (developer.yahoo.com/performance/rules.html#csslink)
    – WillSeitz
    Mar 6, 2013 at 18:09
  • 1
    Still - it's just one more request. Out of potentially hundreds for a complete page load. Sep 5, 2013 at 6:55
  • 9
    Right?! One more request hardly warrants the arm-waving and the all-caps disclaimers. A request isn't bad practice. -1 to the answer -- LESS and SASS cargo cult. Oct 15, 2013 at 15:51
  • Well, It's only one request more .. but you can import more CSS into one and they are downloaded parallelly.
    – wh1sp3r
    May 9, 2014 at 12:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.