Hi everybody!
First of all I’m a total beginner.
I’m working on a new website and everything was fine when I used the preview in the editor (VS) or I opened my index.html with the browser.
Then all of a sudden I could see the html code only. The css was totally ignored. Restarting the editor didn’t help. The same happened when opening the index.html file directly with the browser.
I checked folder structure, files’ names, etc. and they are fine.
I finally spotted this thread on stack overflow: https://stackoverflow.com/questions/45001740/live-preview-not-showing-css-background-in-any-code-editor
The problem is similar! Besides reading the thread, I remembered that I started to have problems after clearing the cache of my browsers (safari and chrome).
So I tried that solution and it partially worked. Now I can see the css, but I don’t see the image I used for the background though (maybe I did something wrong here but I don’t understand what).
Here is my coding: https://codepen.io/francesca829/pen/mzpqPg
Thank you very much for any help!
You had background-image repeated on line 68 of your CSS file on codepen.
1 Like
Hell, yes, you’re right! Sorry for that. I was trying to find a solution and I messed up the code.
I just tried again: I put all the files in the correct folders and now I can’t see the css.
I moved style.css and the background image in same folder of index.html and opened it with safari and NOW everything is fine. Even the background image.
I’m getting crazy.
Why does it happen???
I believe I understand your problem.
Looking at the html on codepen, it looks like style.css has to be in the same folder as index.html
Look at this bit
<link rel="stylesheet" type="text/css" href="style.css">
This requires this folder structure to work:
Project
├index.html
└style.css
This other part in turn
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
requires
Project
├index.html
└vendors
└css
└normalize.css
The same would apply for <img> elements. Look carefully at src and href attributes.
That’s why when you placed style.css right next to index.html everything worked: Because it was only then that the browser was able to find and retrieve the resources needed.
You are a beginner but managed to pull together an interesting site. Keep working and reading sites like https://developer.mozilla.org/en-US/ and you will get better.
Wow. I messed up a lot of things here.
Thank you very much for your help Undigon! And also for your encouraging words! They are much appreciated. 
1 Like