Linking between external CSS files

Topic status automatically displays here - do not remove.

Bookmark this topic  Print this topic

One of the major benefits of storing your styles in an external CSS file is that they are all grouped together in a single location. However, you'll soon find that a large collection of style rules in the one file can become unwieldy.

There are a few possibilities for handling the situation. You could group the rules by category, but this still means you'd have to scroll through the large single CSS file even to find the category. Alternatively, you could split the file into separate smaller files, but this would require a separate link declaration for each separate CSS file, to be added to every HTML file in your site which makes use of your stylesheets.

There is a third possibility, which makes use of the best of the previous possibilities, by grouping the style rules into categories, then splitting the big CSS file into several smaller category-related CSS files, and import linking them to a common CSS file instead of directly linking individually to every HTML file. This method differs from the second possibility listed above, by eliminating the need to add extra links for each CSS file into every HTML file. No changes to any HTML file is necessary. The additional import linking is contained within the common CSS file.

I've implemented this method on my site, and tested it on the major browsers with great success (Internet Explorer versions 7, 6, 5, & 4; Firefox 2; Opera 9; Safari 3 for Windows; and Netscape Navigator 8). They all support this CSS import linking functionality. Even my site editor of choice, Microsoft Expression Web, handles the import linked CSS files without any noticeable problems.

[insert graphic here illustrating the CSS linking]

Each HTML file links (as they have always done) to the CSS file, which in turn import links to several other CSS files.

The CSS import link to each CSS category file requires only one additional line of code for each link:

@import url("CSS-File-Name.css");

Each CSS import link contains the name of the category CSS file. If the file is in another location, the relative path must also be included. The CSS import links must be positioned at the top (start) of the common CSS file, before any style rule declarations in the common CSS file.

For example, I have included several CSS import links in my master common stylesheet LotechSolutions.css:

/* link to external sub style sheets */
@import url("LotechSolutionsText.css");
@import url("LotechSolutionsLinks.css");
@import url("LotechSolutionsLists.css");
@import url("LotechSolutionsTables.css");
@import url("LotechSolutionsLabelsAndCode.css");
@import url("LotechSolutionsColours.css");


/* MAIN TOPIC STYLES */

body /* default paragraph and font style from which all others are inherited */
{ …

Now, for instance, when I need to edit the style for a list, I only need to open and edit the LotechSolutionsLists.css file, which contains all the style rules for lists, and nothing else. Easy to find and maintain.

I can see too, that this will be useful for temporary CSS rules, as they can now be placed into a separate testing CSS file, and import linked during testing. After testing, those style rules that I wish to add permanently to the site, can then be transferred to the appropriate category CSS file, and the temporary import link can be removed.

I also foresee that I can use this CSS import linking for differing outputs, such as screen or print media. I already have a separate print CSS file, containing duplicate style rules for every style in the site. Only a few differ for printing output. Now I can cull the file down to contain just those few printing rules, and import link all the others. But that's a topic for another day.

Summary

The ability to link between external CSS files provides a web site maintenance benefit by removing duplication. A single common CSS file can contain import links to several other CSS files, eliminating the need to add extra links for each CSS file into every HTML file.

Who am I? > find out more