CSS link not working. Help and Advice needed. (Solved)

10 days ago by tumbling4986 to c/programming

Am trying to learn web development by creating a website my own instead learning every single theory written on a textbook.

Currently am trying to link a stylesheet and favicon on my root folder into the file called debian.html and debian-post-install.html. But it's not working and I don't know why.

code used inside both html files head section are,

<link rel="stylesheet" href="/styles/style.css" />

<link rel="icon" type="image/png" href="/images/favicon.png" />

To point to the root directory files or directories we use / in html instead of ../ right? Then why it's not working.

Also I need advice on how bad is my html file structuring and what changes recommended.

Solution

<link rel="stylesheet" href="../../styles/style.css" />

<link rel="icon" type="image/png" href="../../images/favicon.png" />

Hemuphone 5 points 10 days ago

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.

save

path: 0 26256510, hotness: undefined, score: 5, children: 4

Crumpled6273 4 points 10 days ago

In stack overflow i saw,

/ = root of the current drive, ./ = current directory, ../ = parent of the current directory.

What exactly is this .../ ?

Btw, I solved it by writing the path like this,

<link rel="stylesheet" href="../../styles/style.css" />

<link rel="icon" type="image/png" href="../../images/favicon.png" />

Thank you for taking time to answer me.

save

path: 0 26256510 26256643, hotness: undefined, score: 4, children: 3

Hemuphone 1 point 10 days ago

/ 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.

save

path: 0 26256510 26256643 26257406, hotness: undefined, score: 1, children: 2

cypherpunks 2 points 8 days ago

On href, I think all 3: style.css, /style.css, ./style.css point to the same place.

no, they do not. (click for details)

those three do not always resolve to the same thing: the first and last are relative, while the second is absolute.

from a file at http://example.com/index.html, all three would resolve to http://example.com/style.css.

But from a file at http://example.com/foo/index.html the href="style.css" and href="./style.css" will both resolve to http://example.com/foo/style.css while href="/style.css" will continue to resolve to the file at the root (http://example.com/style.css).

save

path: 0 26256510 26256643 26257406 26280580, hotness: undefined, score: 2, children: 1

Hemuphone 2 points 8 days ago

Interesting! TIL.

save

path: 0 26256510 26256643 26257406 26280580 26281744, hotness: undefined, score: 2, children: 0

thenextguy 1 point 10 days ago

I'm no webdev, but I think neither / nor ../ should be there. The paths are relative to where you are currently.

save

path: 0 26256462, hotness: undefined, score: 1, children: 3

Crumpled6273 2 points 10 days ago

Confusing... If neither / or nor .../ should be there then how to define the path. Or I just didn't get what you mean?

save

path: 0 26256462 26256535, hotness: undefined, score: 2, children: 2

thenextguy 3 points 10 days ago

Paths don't have to start with either of those. Just "styles/mystuff.css" is perfectly valid.

If you start with / the server looks at whatever IT thinks the root folder is, which may not even be visible to your app or site. That's not what you want most of the time.

Even at the command prompt you can do "cd styles" without any / or .. at all. Try it. If you really want you can probably use "./styles", where the single dot means the current directory. But you really shouldn't need it.

save

path: 0 26256462 26256535 26257112, hotness: undefined, score: 3, children: 1

Hemuphone 3 points 10 days ago

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.

save

path: 0 26256462 26256535 26257112 26257447, hotness: undefined, score: 3, children: 0

Rules

Wormhole

Follow the wormhole through a path of communities !webdev@programming.dev

Rules

Wormhole

Follow the wormhole through a path of communities !webdev@programming.dev