Using the CSS @import Rule

Published March 19, 2008 by CSS Newbies.

box of crayons

Even the most complex style sheet starts out with a single rule. But when you’re working on a particularly massive and complex website, over time your style sheet will inevitably start to reflect the site’s size and complexity. And even if you employ every trick for organizing your CSS in the book, you might find that the sheer size of the file is simply overwhelming. At that point, you might want to consider splitting your style sheet up into several smaller CSS files. That’s when the @import rule can come in quite handy.

The @import rule is another way of loading a CSS file. You can use it in two ways. The simplest is within the header of your document, like so:

	@import url('/css/styles.css');

But that isn’t necessarily the best method for keeping your XHTML small and your code clean. To that end, you can import a style sheet from within another stylesheet. And better still, you can import any number of styles this way. So your document’s head could look like this:

<link rel="stylesheet" type="text/css" href="/css/styles.css" />

Nice and clean. But then your “styles.css” document can contain calls to any number of additional style sheets:

@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');

/* All three CSS files above will be loaded from
   this single document. */

This lets you break up your gargantuan stylesheet into two or more logical portions — I chose typography, layout and color for this example, but you might prefer dividing your CSS according to the site sections they style (content versus sidebar, etc) or something similar. Either way, the benefit is immense — you can have the same number of CSS rules overall, but in smaller, easier to manage units.

You can even load both your screen and print (or handheld, etc) stylesheets all at the same time using this trick. If you’d like to specify a media, just write your rules like this:

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

Like most cool things in CSS, this one comes with a couple of caveats:

  • The @import rule isn’t recognized by the really old browsers out there… Netscape Navigator 4 skips over @imports entirely, and Internet Explorer 4 ignores them if you don’t use the (entirely optional, but generally used) parentheses. Of course, not too many people these days use either of these archaic browsers. And this problem can actually be useful if you’d like to hide some or all of your CSS from the browsers that can’t really support it.
  • Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else.
  • Internet Explorer (you knew it’d come up eventually) doesn’t deal well with specifying media types – it chokes. Basically, IE (versions 4-7) try to read the media type like it were part of the file name, causing the whole thing to come crashing down. As such, if you don’t want your CSS to have a default media type of “all,” you’re probably better off using a combination of the <link> tag and imports – specifying a media type in your link, and then importing the appropriate CSS within the file you’re linking to. I haven’t yet heard if IE8 suffers from this same problem (if you happen to know, please enlighten me in the comments!).

But even with those caveats in mind, this can be a really useful technique. No matter how big your website ends up getting, you’ll be able to keep your style sheets under control.

101 Responses

  1. Pingback: 5步让你的CSS样式表成功减肥 | 乐享weby

  2. content (reply)

    Hi there, I came across your website by way of Bing whilst trying to find a comparable make a difference, your website came out, it’s excellent. I have book-marked to be able to the favourites types|included with favorites.

  3. just car finance (reply)

    You are not a professional car buyer or not vedry confident about choosing the right car, it would be better to
    take help from some car broker. Here are thhe results frlm all three of thrse auto
    websites:. But how on earth can one get an affordale car annd yyet posses the carrying passenger capacity oof 5 persons(
    including driver ) and yet allow thee transportation of goods.

  4. Pingback: CSS @import 와 < link > 의 사용 유의점 - Jacob is studying on web programming

  5. Pingback: How to: Is it possible to include one CSS file in another? | SevenNet

  6. Pingback: Solution: Is it possible to include one CSS file in another? #dev #it #computers | Technical information for you

  7. Pingback: Fixed Is it possible to include one CSS file in another? #dev #it #asnwer | Good Answer

  8. Juliann (reply)

    Similar to the net surveys websites, customers will even be required to
    finish a certain number of product offers on-line before lastly being
    awarded their coveted codes.

  9. sbobet รับพนันกีฬา (reply)

    Admiring the dedication you put into your blog and detailed information you offer.
    It’s awesome to come across a blog every once in a while that isn’t the same out of date rehashed material.
    Excellent read! I’ve bookmarked your site and I’m adding your RSS
    feeds to my Google account.

  10. Pingback: Pros and Cons: One Cascading Style Sheet or Many

  11. custom t shirt (reply)

    Thanks , I have just been searching for information about this subject for a long
    time and yours is the greatest I’ve discovered till now.
    However, what in regards to the bottom line? Are you certain in regards to the supply?

  12. logo shirts (reply)

    I was suggested this web site by my cousin. I’m now not sure whether or not this put up is
    written by means of him as no one else recognize such detailed approximately my problem.
    You are amazing! Thanks!

  13. Adrianna (reply)

    Aw, this was an extremely good post. Finding the time
    and actual effort to produce a good article… but what
    can I say… I put things off a lot and don’t manage to get nearly anything done.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>