There’s nothing more frustrating than writing the most perfect lines of CSS for your site’s look and feel… only to find that for one reason or another, the CSS style sheet isn’t updating.
Trust me, I’ve experienced this many times before. So many times, as a matter of fact, that I’ve developed for myself a playbook for such cases. And in this article, I’ll share my playbook with you.
When your website’s CSS style sheet isn’t updating, perform the following checks:
- Clear your browser’s cache
- Clear the server and/or CDN cache
- Check your CSS selection for correctness
- Check for other CSS rules that are overriding yours
Clear Your Browser’s Cache
Unless you’ve explicitly instructed browsers not to cache the resources on your server, which you probably haven’t since you’re reading this article, most browsers will cache the CSS style sheets on your website.
(As a side note, you can control how browsers cache your website by setting Cache-Control HTTP headers in the httpd.conf or .htaccess files of your Apache server. This can be a particularly useful thing to do on a local machine or in a development environment.)
Before you do any more elaborate checks, do a hard refresh of the page and see if that solves your problem. To do a hard refresh, hold down the Control key on your keyboard and press F5 or click on the browser’s “Refresh” button.
Related: How to Clear the Cache on Any Browser
Clear the Server And/Or CDN Cache
If hard-refreshing the page didn’t work, and you have server-side and/or CDN-side caching for your website, then try clearing those caches, too.
For example, if you’re running a WordPress website and you have the W3 Total Cache or WP Super Cache installed, make sure to clear the cache.
Likewise, if you use Cloudflare, AWS CloudFront, or another content delivery network (CDN) to speed up the loading of your website, you should also clear the caches of the CDN.
Check Your CSS Selection
I can’t tell you how many times I’ve spent hours looking for problems with my browser or server, only to find that I had used the wrong CSS selector all along.
So if clearing the browser cache doesn’t solve your problem, check if you’re using the correct CSS selectors in the first place. (You could be selecting against the wrong id, class name, or DOM element, for example.)
I like to check that I’m using the correct CSS selector by opening my browser’s dev tools and entering the JavaScript code fragments below into the console.
If you’re targeting a single element in the HTML markup, replace “YOUR CSS SELECTION” with your CSS query and enter it into your browser’s console:
// Select a single DOM element
document.querySelector('YOUR CSS SELECTION');
// For example
document.querySelector('#menu-item-1');(Read more about the document.querySelector method at MDN Web Docs.)
If you’re targeting multiple elements in the HTML markup, replace “YOUR CSS SELECTION” with your CSS query and enter it into your browser’s console:
// Select multiple DOM elements
document.querySelectorAll('YOUR CSS SELECTION');
// For example
document.querySelectorAll('.menu-item');(Read more about the document.querySelectorAll method at MDN Web Docs.)
For both use cases and with both JavaScript methods in the console, if the browser highlights the target element DOM, your CSS query is correct. If it doesn’t, check your CSS query—you’re probably targeting the wrong element.
Check For Overriding CSS Rules
If you cleared the client, server, and cloud-side caches and your CSS queries are correct, the most likely reason why your website’s look and feel isn’t updating is CSS precedence.
In other words: There’s probably a CSS rule somewhere in your HTML document or in the CSS style sheets linked from it that overrides the CSS rule you just wrote.
Here’s a primer on CSS precedence to help you understand how exactly it works:
- Inline CSS takes precedence over CSS rules in a
<style>tag in the<head>section or in a CSS file - A rule that appears later in your CSS style sheet takes precedence over one that appears earlier
- Specific CSS selectors (say,
#nav-item-1) take precedence over generic CSS selectors (say,.nav-item) - CSS rules with the
!importantproperty always take precedence over those without
Fire up your browser’s dev tools again. This time, however, instead of using the console, use the HTML and CSS Inspector to inspect all the CSS rules that target this particular element (or group of elements). Look for rules that might override yours.
The Bottom Line
When your website’s CSS isn’t updating, purge the caches on the client side, then the server side, and then the CDN side. If that doesn’t solve your problem, check your CSS selectors for correctness and look for other rules that may be overriding them due to CSS precedence.
