/ being root directory does not apply to the web browser.
…/ means nothing, as its not defined. Results may vary based on interpreter, but nothing useful.
On href, I think all 3: style.css, /style.css, ./style.css point to the same place.
This seems like the least efficient way possible to solve a problem, but here we are. I’m too lazy to actually test/research this, so this is only my best guess.
HTML links are pretty much always relative. You cannot think of it like linux filesystem where / would be root. Here, …/ would likely work much better for you. Should be quick to test a few combinations.
About the html file structuring, I think it truly does not matter. There isn’t a very widely used ruleset for this. No modern web application is built using raw html files, as most are single-page applications built on top of react/vue/etc. But for learning html/css/etc basics, this is probably a good way to start to understand what the browser actually will see.
When debian.html is loaded, href in it looks at current path, so . would be something like http://website.com/linux-guides/debian There is no styles.css in that path, but we can request href to point to http://website.com/styles.css with a few …/…/
I think its not a good practice these days, but on pure html site and for learning, definitely valid.