CSS not updating on change

Question

When I try and change my current CSS or add new CSS to my style-sheet no change shows up (tags are still being styled by the old unchanged code).

For example, if I delete the contents of a class and I go into chrome debug tool using F12, I can see that the contents which I deleted are still showing up - even if I clear the cache by pressing Ctrl+Shift+R, OR by pressing Ctrl+F5!

All the other files of my website seem to be updating correctly, so if I use inline styles it will update correctly.

Strangely when I go into my websites control panel and manually download the CSS style-sheet from my server I can see that the code has indeed being updated with the new code, this is weird because upon inspecting it with F12, I can still see the old code with no changes.

• I am using Microsoft Webmatrix to do my coding.
• I am using the Chrome Web browser.
• I am using Hostgator hosting.

I've exhausted all my trouble shooting options and have been beat by something that by all means should not occur. I think I've had a problem like this before and I think that it was solved by just waiting a day for whatever magic to work but I shouldn't have to wait. A problem like this is absolutely unacceptable in a live environment. Any ideas of what could be causing this?

FIXED!

changed: https://example.com/app/source/css/main.css

to this: https://example.com/app/source/css/main.css?v=1

Answer 1

Add ?v=1 behind the URL of the CSS link in the head, which will force using a non-cached version, because of the different (new) file name. The number should be unique, so if you want to use this in the future, make sure to replace the 1.

Answer 2

You could try ctrl + shift + r (on a PC) to hard reset the browser and make sure the cache isn't displaying old CSS.

One thing is to verify you are editing the correct file. I managed to have that issue one time when I had two files named the same, but one was outside the folder with the index.html and that was the one I was editing.