Include CSS files within a CSS file

2010-01-16 @ 14:31

Call to multiple files in the HTML document

Do you add multiple stylesheets in your HTML file like this?

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style-pages.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style-posts.css" type="text/css" media="screen" />

Include CSS-files within the CSS-file with import

Instead of putting multiple rows of data in your HTML file, you could add them into your CSS file.

@import "style-pages.css";
@import "style-posts.css";

It works with every browser I know of.

RSS-feed for comments

One reply to “Include CSS files within a CSS file”

  • Nushae Fahey
    2010-01-27 @ 4:41 e m

    I wouldn’t use a blanket ”don’t do this” statement here. There are two reasons why you would (and should) use multiple stylesheet links instead of @import:

    1) alternate media stylesheets, for obvious reasons
    2) when you decompose your css files for topical or contextual reasons (eg. your career section uses a slightly deviating style from your products section, but both use largely the same general style)

Leave a reply