How to include all css kept in a directory?

You'd need to do this serverside. If you're using PHP, have a look at glob.

For example:

foreach (glob("path/to/css/*.css") as $css) {
    echo "<link type='text/css' rel='stylesheet' href='$css'>\n";
}

No it's not possible to use wildcards in a href. You will need to specify a link tag for every css file you need to include.


You could create a master stylesheet that you include in every page, and within that css file you can use @import to include the others.

This doesn't solve the problem of having to manually include each individual css file, but at least it encapsulates it within the master stylesheet so you don't have to repeat all of the references in every html file. If you add additional css files you will only need to add a reference in the master css and all pages will get access to it.

Example HTML CSS Reference:

<link href="master.css" type="text/css" />

Example Master CSS (master.css):

@import url(style1.css);
@import url(style2.css);
@import url(style3.css);

Read more about when to use @import and its compatibility with older browsers.


Unless I'm mistaken, this can be done quite nicely (though still manually) similar to JavaScript.

./styles/
   ./layouts/
      all.css      <-- Each subfolder has this
      header.css
      footer.css
      nav.css
   ./main.css      <-- Main CSS file

Inside ./styles/layouts/all.css do you import:

@import 'layouts/header.css';
@import 'layouts/footer.css';
@import 'layouts/nav.css';

Right, this separates the minor logic in CSS organizatoin (which is good IMHO).

Then, as many "all.css" files in subfolders there are, just include them (Example):

main.css

@import 'variables/all.css';
@import 'layouts/all.css';

I think thats rather nice...

Tags:

Html

Css