How to link a CSS file in HTML file which is located in another folder

Question

My link looks like this

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

It is seen from the picture that path of the header.ejs file is /views/partials/header.ejs , while all.css file located at styles/all.css . How to link these both files?

Answer 1

Change it to

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

Explanation : If you go only one folder back from your header.ejs file, you are in the folder views . There is no styles folder stored there. So you need to go one more folder back.

Answer 2

I think you need to use

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

to go up to the personal_website directory before going to /style/all.css

Hope this helps :)

Answer 3

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

That should work.

• Is the image in the same directory as the file referencing it?
• Is the image in a directory below ?
• Is the image in a directory above ?

By "below" and "above", I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my primitive example:

Here is all you need to know about relative file paths:

• Starting with "/" returns to the root directory and starts there
• Starting with "../" moves one directory backwards and starts there
• Starting with "../../" moves two directories backwards and starts there (and so on...)
• To move forward, just start with the first subdirectory and keep moving forward