How do I move up a directory using the <link> in HTML for my stylesheets to work while using htaccess?

My directories are as:


In my htaccess, it contains:

RewriteRule ^login/?$ php/login.php [L,QSA,NC]

Now, the stylesheets work when I copy the css folder to inside my php. They work with href="css/styles.css".

I don't want that. I want to move up and out of the php directory to the css folder in my root directory. But the stylesheets won't show when the href="../css/styles.css".

How do I move up a directory to use my stylesheet in the root css folder with htaccess?

EDIT: I have tried using the <base href="/" />, but that prevents the stylesheets from loading on both /login/ and /login.php.


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../js/system.js"></script>
<link href="../css/styles.css" rel="stylesheet" />


ErrorDocument 404 http://localhost/Sites/OrderFresh/html/error404.html
RewriteEngine On
RewriteRule ^login/?$ php/userconnect.php [L,QSA,NC]
<Files .htaccess>
order allow,deny
deny from all
  • The base tags prevent the stylesheet from working on both /login/ and /login.php
    – Ackados
    Jan 21, 2017 at 20:51
  • Have you tried using the absolute URL?
    – Steve
    Jan 21, 2017 at 21:51
  • Can you please include the relevant link and base element combinations you have tried to your question. Do you have any other directives in your .htaccess file?
    – MrWhite
    Jan 21, 2017 at 22:16
  • 1
    Don't overcomplicate it. <link href="/css/styles.css"... Jan 21, 2017 at 22:44
  • 1
    The URL-path that Tim suggests already does "move up one directory". It is a root-relative URL-path. If the css directory is in the document root, as you stated, then that is all you need (you don't need a base element in that case). If, however, you did include a base element that references a document in the web root then the path to your js and css files would simply be "css/styles.css". However, if you specified a path of "../css/styles.css" with the above base element then you would be trying to go above the document root which would fail. This is covered in the dupe question.
    – MrWhite
    Jan 21, 2017 at 23:08

1 Answer 1


I get around this problem using site relative linking for CSS and JS files.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/js/system.js"></script>
<link href="/css/styles.css" rel="stylesheet" />

When the URL starts with a slash, that tells the browser to start at the document root for the site. Your CSS and JS files will then be correctly linked no matter what directory your page looks like it is in.

Not the answer you're looking for? Browse other questions tagged or ask your own question.