Redirection to load a CSS file

Question

I have in a remote server with this index.html that I can not modify:

<link rel="stylesheet" type="text/css" href="styles.css" /> 

But my styles.css file is not at the web root, that is /styles.css but at /css/styles.css, is possible through an .htaccess file load that file?

I have tried with:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /css/
</IfModule>

but it styles.css is not loaded yet.

NOTE: of course this is a minimal example, I would like to find a rule to load more than a CSS, not just one.

Answer 1

Although the browser should cache permanent redirects, I think an internal rewrite would be preferable. This avoids the browser having to make an additional HTTP request:

RewriteEngine On
RewriteRule ^([a-z]+\.css)$ /css/$1 [L]

Answer 2

You could just redirect /styles.css to /css/styles.css. In the .htaccess in the web root:

RedirectMatch permanent /([a-z]+\.css)$ http://example.com/css/$1

(Replacing example.com with your real domain name.)

Answer 3

Just as an alternative to the .htaccess rules, you could include a styles.css file in the root, and just put @import statements in there that load the actual css files. Something like this:

/styles.css

@import 'css/styles1.css';
@import 'css/styles2.css';
...

I know it is an extra request and definitely not best practice, but it should be cached, and is a flexible and easy solution.