Need help linking to a css file from a sub-folder

I have a website with folders of css, documents, images, pages2020, pages2021, and files in the root directory.

I copied the month .html files (like december2020) to the pages2020 folder. I did this to try to organize my file structure more cleanly. Now that 2021 is upon us, keeping any month .html files in a year folder seems to make sense.

In my html, I can link to those files without problems. However, here is the problem. When those month files, like december2020, are in the root folder the webpage looks great. The css file, which is in the folder css and named style.css, works. But when I copy that .html file to the pages2020 folder, the information on the page is there, but no css carries over with it. The formatting of text, background of the page, etc is not there.

So, how can I get that css/style.css file to work for .html files that are in folders?

By the way, I’ve checked more than 100 websites and asked this question in three Facebook groups. I have yet to find the answer. I think it’s something simple, but I’m just not seeing it.

Thank you!

1 Like

You could try using an absolute URL path to the CSS. For example:

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

That will make the page load the CSS from the same location on the site (i.e. example.com/css/style.css), no matter where the page lives.

1 Like

The email sent to me was this and it didn’t work either:

You could try using an absolute URL path to the CSS. For example:

That will make the page load the CSS from the same location on the site (i.e. example.com/css/style.css), no matter where the page lives.


1 Like

Note: there was a typo in the example code I posted. The href should be the singular /css/style.css rather than the plural. If that doesn’t help, then maybe you could give more details? E.g. The exact folder/file structure of the site, and copies of the HTML you use for loading the CSS.

From your description, here is how I imagined the sites structure (using the tree command) and page HTML, but it is probably wrong. If you can provide the same level of technical details, we could probably figure the issue out.

Site Structure:

$ tree example.com/

example.com/
β”œβ”€β”€ index.html
β”œβ”€β”€ css
β”‚   └── style.css
β”œβ”€β”€ january2021
β”‚   └── index.html
β”œβ”€β”€ pages2020
β”‚   └── december2020
β”‚       └── index.html
β”‚   └── november2020
β”‚       └── index.html

Page HTML:

/pages2020/december2020/index.html:
<!DOCTYPE HTML>
<html>
<head>
...
<link rel="stylesheet" href="css/style.css" type="text/css">
...
1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.