{"id":59,"date":"2008-03-19T07:00:29","date_gmt":"2008-03-19T12:00:29","guid":{"rendered":"http:\/\/cssnewbie.com\/css-import-rule\/"},"modified":"2008-03-19T07:00:29","modified_gmt":"2008-03-19T12:00:29","slug":"css-import-rule","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-import-rule\/","title":{"rendered":"Using the CSS @import Rule"},"content":{"rendered":"

box of crayons<\/p>\n

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<\/a> 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.<\/p>\n

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:<\/p>\n

<style>\n\t@import url('\/css\/styles.css');\n<\/style><\/pre>\n
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<\/em> another stylesheet. And better still, you can import any number<\/em> of styles this way. So your document\u2019s head could look like this:<\/p>\n
<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/css\/styles.css\" \/><\/pre>\n
Nice and clean. But then your “styles.css” document can contain calls to any number of additional style sheets:<\/p>\n
@import url('\/css\/typography.css');\n@import url('\/css\/layout.css');\n@import url('\/css\/color.css');\n\n\/* All three CSS files above will be loaded from\n   this single document. *\/<\/pre>\n
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.<\/p>\n
You can even load both your screen and print<\/a> (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:<\/p>\n
@import url('\/css\/header.css') screen;\n@import url('\/css\/content.css') screen;\n@import url('\/css\/sidebar.css') screen;\n@import url('\/css\/print.css') print;<\/pre>\n
Like most cool things in CSS, this one comes with a couple of caveats:<\/strong><\/p>\n