Linking from multiple html-files to my css-file

Hi everybody,

while I go through the front-end-engineer path I want to work on my own homepage as a side-project. Actually I’m about to make a structure about the file-directories and the files I want to create this far. my file directory looks like in the screenshot I’ve added (I work in Visual Code Studio). Let’s approach to my problem. I have my index.html file and it is linked to the css-file (called style.css) in the appropriate folder (called style) using the following path:

Everything’s fine so far and I can style my index-file. But I have also three subpages (about.html, portfolio.html and contact.html). To keep my directory clear I put them in a folder called pages. Unfortunately it seems I fail to link them to the css-file mentioned above. I use the following path in the corresponding html-files:

“…/style/style.css”

Am I wrong in my path or have anyone an idea where their is a mistake? Thank you very much for your help!!
directory

Hey @cmjoppich1727537246. You only need 1 dot. ./style/style.css because the HTML and CSS folders are in the same folder.

1 Like

For the sub-pages you actually need to have two dots by the looks of it (at the moment you have three) to signify that you want to move up into the parent folder then down into style/. So the full path would end up being ../style/style.css

Happy coding! :smile:

Hey @notlyall and @how_to_program!

I´m sorry!! This was a typing error in my post!! Indeed I already have 2 dots to move from the pages-folder to the main-directory () and then on to the style-folder. But it doesn’t work… :roll_eyes:

Just to clarify, which html file are you trying to link from, if it’s index.html it would be the path Ethan mentioned, while for the subpages it should be the one with I mentioned with two dots, that said, since that doesn’t seem to work I’ll test it out myself to be sure, just give me a moment and I’ll get back to you :slight_smile:

My index.html is linked to the css-file by

and my 3 subpages are linked by

Hope this helps.

Sorry, it’s late in the evening. :wink: Here are the directories:

index.html: style/style.css

subpages: dot dot/style/style.css (I write dot dot because when I make two … I get … in my post like here. I think my first post was not a typing error…)

1 Like

So having tested it, the paths should be as follows:

  • Main page: ./style/style.css, this is telling it to look for the css folder in the same folder as the html file.
  • Subpages: ../style/style.css, this is telling it to look for it in the next folder up.

That said, your subpages path looks to be correct (not sure why the forums is trying to turn .. into ... automatically) so perhaps it’s an issue with something else. If that doesn’t work could you share a little more of the code just to rule that out (perhaps the link tag itself)

Happy coding! :slight_smile:

1 Like

When I was reading your sentence with “issue with something else” I tried the desperate way. This far I opened my pages in Safari and refreshed them. No I have tried to open my pages in Chrome and Firefox where it was working fine! Then I restarted my computer and now it’s working in Safari as well. :thinking: However, so my linking was fine but I got linked my my Mac.

Just to summarize for anyone who comes here later. My index-file is correctly linked to the css-file by:

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

but

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

was working too.

And my subpages are linked proper to the css-file by

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

Thanks a lot for your help @notlyall and @how_to_program

1 Like