What's the deal with '/path' versus 'path' for local/remote testing?

I’m developing and testing a website locally. All the paths in my code are relative and are in the form ‘directory/file-name.css’. For example, my stylesheets are linked in my html like the following:

<link rel=“stylesheet” href=“stylesheets/style.css” />

This works fine for testing locally in my browser. However, when I upload to my remote web host, all the paths need to be changed to begin with a ‘/’ like so:

<link rel=“stylesheet” href=“/stylesheets/styles.css” />

Can someone please explain to me why I need to use ‘/’ for remote web host but omit the slashes for testing locally in browser? I have been coding without the '/'s then adding them back later before I upload to server. Tedious work! Need a better solution.

Sorry if this is posted in wrong place, not sure where this type of question goes.

Without the / the reference is relative to whatever is considered to be the current folder.

With the / the reference is relative to the root folder.

When the root folder is the current folder the / becomes optional and the reference will work either way. When they don’t both work the same it indicates that the current folder isn’t the root folder.

All my web files are contained in the root directory ‘website’. So all html files are in ‘website’ and stylesheet files are in ‘website/stylesheets’. The ‘/’ isn’t optional for me. The reference does not work locally if it begins with ‘/’ but is necessary to work remotely.