Introduction

When testing changes to CSS it can sometimes appear that nothing is happening.

That can be caused by many issues, but one issue that can be tricky to detect is when the browser is caching old CSS after a reload of the page.

Even after the page is refreshed and the HTML content is updated, the old CSS styling can still linger. That can be particularly frustrating and confusing. If the page has refreshed, why hasn’t the styling updated?

Understanding the different types of page reloads can be helpful here.

And inspecting the element with Chrome Developer Tools can help to quickly determine where styling is coming from.

The Solution

Fortunately, the solution in this case is very simple.

If an outdated CSS file was the cause of the problem, perform a hard reload and your styling will be updated.

In fact, this is such a quick and easy technique that you can just try it and see if it resolves the problem before proceeding to more involved approaches to debugging.