@import CSS directive - Including external CSS files and commands

The @import function will not work if it comes after regular CSS definitions and commands in your CSS file. Make sure that @import commands come before anything else in your CSS file

The @import feature for importing external CSS files from one file into another is instrumental in creating a well organised and library of manageable CSS files. One can add these commands; example:

into one existing file to import the definitions of the second file into the first without having to copy and paste the contents of the second file. This fact alone saves the CSS coder/author the trouble of having to maintain some common CSS commands in multiple places by enabling the contents of smaller files (derived from a re-usable library of definitions) to be included into a bigger file depending on the needs of a given project

Another benefit of using @import to include these external CSS files is to avoid a very large single CSS file by splitting the instructions into groups of similar commands, functions or markup regions and characteristic (header, footer, middle or text_formatting, layout, accessibility) while avoiding situations where many CSS files have to be pulled/linked to from the HEAD of every XHTML document, or CMS assembly script. As such, a page architect can call one master CSS file into very page, and use that page to define the sub-sets of CSS files that are relevant.

In the ideal world, @import would only be used to call smaller files into the single parent CSS file for each page. But it is sometimes necessary to either include CSS formating selectors and descriptions in the parent CSS file, or to make further @import calls from within one child CSS page into another. However, these instructions MUST come before any CSS instructions (selectors and definitions) that are within the file that is importing these external commands.

IE browsers seem to tolerate the @import of files after common/regular selectors, but Mozilla Firefox requires that @import commands come before these free from rules. This is the official procedure for using the @import rules as declared by the W3C and covered by respectable reviews of CSS such as Cascading Style sheets - The Definitive Guide (by Eric A. Meyer).

Similarities and differences between @import and the LINK command for including CSS files Both operations instruct the browser to include the contents of one CSS file into another. However, unlike LINK, @import does not distinguish between media (PDA/Braille/Screen/Print etc), and it will import and apply any CSS files regardless of the intended media as it does not have an attribute to manage media specificity.

Like every function and feature of CSS, the use of @import is not supported by all browsers and browser versions. Much as this can be a hindrance, it can also be exploited to direct certain CSS commands to certain browser versions, types and even Operating System platforms in a way that cannot be achieved using the Media attribute of the LINK element in XHTML, and without using a scripting language. Here is a document that tabulates the support of various formats of the @import command