[CLOSED] CSS style wont load on .html

[core-ai-bot]

Issue by PhilHed
Monday Feb 15, 2016 at 21:49 GMT
Originally opened as adobe/brackets#12217

---

Hello.
I've downloaded Brackets editor to do some html coding. I'm very inexperienced.
Brackets is an amazing tool, and i love it's live preview. But as you can guess, im having trouble.

So fare i've managed to create a project folder where my home page is located: home.html. I've linked its style to my style.css file which is in a subfolder CSS, the layout is working without trouble.

But the style from the css is not working on the contact.html file. I've copied exact same code from my home.html page, but still no luck.
NOTE: The contact.html file is located in another subfolder called HTML, but why should that have any effect? What i dont understand is that i have the right direktori in my style href link: css/style.css

I simply can't get it to work. I hope you can help.

[core-ai-bot]

Comment by 1405570455
Tuesday Feb 16, 2016 at 02:38 GMT

---

If I'm understanding your questions correctly, and your directory looks like this:

project folder
│   home.html
│
├───css
│       style.css
│
└───HTML
        contact.html

Remember: folder and directory mean the same thing
Your problem is, when your browser is reading your HTML and reads your link:

"css/style.css"

It searches In its own directory for the a folder called css. Because your contact.html is in your HTML subfolder, it looks for, but can't find a folder called css because its only looking in its own directory. What it really needs to do to find your file is:

1. Go up 1 directory (out of the HTML folder and into your project folder)
2. Go down into the css folder (from the project folder)
3. Read the style.css file in the current folder (css)

Here is how you write the path for those instructions:

"../css/style.css"

The two periods (also called full-stops) at the beginning tell it to go up a directory, the css tells it to go into the css folder, and the style.css tells it there is a file there called style.css (and that's the file you are linking to).

This isn't a problem with adobe brackets, it's working with "relative paths" which are used in almost every operating system's file system. If what I said doesn't make sense, Adobe (despite your issue raising nature) took mercy on you providing this article on understanding both relative and absolute URLs, and their relationship.

Did that help you?

[core-ai-bot]

Comment by PhilHed
Tuesday Feb 16, 2016 at 09:30 GMT

---

And the issue has been resolved!

Thank you very much.

[core-ai-bot]

Comment by abose
Wednesday Feb 17, 2016 at 09:10 GMT

---

@tjgerot Thank you for the help.
Closing as answered.

[core-ai-bot]

Comment by UnfairPolarBear
Sunday Jun 03, 2018 at 04:21 GMT

---

@tjgerot Thank you so much. You are my hero.

[core-ai-bot]

Comment by ziggystarlord144
Sunday Nov 03, 2019 at 19:47 GMT

---

I'm having a similar problem, except in my layout, I don't have my main html (I called it index.html) in a folder separate from the main folder containing both the CSS folder and index.html. Adding the full stops didn't help; the live preview still doesn't load the CSS at all. Any suggestions?

Edit: I thought it was important to add that the external stylesheet does work on my repository on GitHub.