Relative path in a HTML file

Question

I have the following folder structure tree (folder names are written in uppercase letters):

ONLINESHOP
    |-- index.html
    |-- COMPONENTS
    |-- CONFIG
    |-- TEMPLATES
        |-- CSS
            |-- main-style.css
    |-- CONTROLLERS
    |-- MODELS
    |-- VIEWS
       ...
       |-- USER
           |-- login.html

So the root folder is OnlineShop. I am trying to reach main-style.css from login.html

This works:

<link rel="stylesheet" type="text/css" href="/OnlineShop/templates/css/main-style.css">

And this doesn't:

<link rel="stylesheet" type="text/css" href="/templates/css/main-style.css">

My question: why doesn't the later code work? Isn't / supposed to bring me to the root folder (OnlineShop)?

Answer 1

What is the web application root depends on your server configuration.

As an alternative you can use:

<link rel="stylesheet" type="text/css" href="../../templates/css/main-style.css">