Are you not seeing the changes you applied via CSS on your website? That’s both annoying and workflow-disturbing because CSS (Cascading Style Sheets) is a language based on rules. They dictate which styles apply to the elements or element groups on web pages. Without those modifications, web pages on your website simply won’t have the look, feel, and functionality you want. Luckily, not all hope is lost. We have several ideas on why that might be happening. Then, we will suggest a couple of fixes for the issue with CSS not loading on your WordPress website.
Why is the new CSS code not appearing on my WordPress website?
Here are several reasons your new CSS code is not loading on your WordPress website:
1. A CSS rule is overwriting the previous ones because of stylesheet cascading
Stylesheet cascading is a common reason that the latest changes in CSS don’t appear on the front end of your website. That is the primary functionality of CSS in WordPress, and how the CMS (content management system) handles styles. A simple example would be a single stylesheet containing this code:
H2 {color: red;}
p {color: blue;}
...
H2 {color: green;}
Despite H2 being set to red at first, you would see all H2 on the front end as green because the second H2 happens later in the same stylesheet and has precedence. That’s where the term “cascading” comes from. This can be relatively easy to solve if it happens within one .css file. However, the cascading rule applies to all stylesheets, meaning that only the setting in the stylesheet that’s configured is the last output in your web page’s <head> tag applies.
2. A caching plugin or setting is malfunctioning
Another frequent cause of CSS not loading in WordPress lies in caching. Perhaps you can’t see the changes because they haven’t been cached yet. It’s also possible that the “minify CSS” setting on catching plugins is causing problems with the newly added code. Some users report that the plugin they installed is conflicting with the catching on the server their site is hosted on, too.
3. Your CSS doesn’t fit certain criteria
If the CSS you added is not loading, perhaps it doesn’t fit the requirements you set. An example is an element or a group of elements that only appears on older mobile devices or resized windows, e.g., resolutions lower than 768 pixels. Also, due to the cascading we mentioned, each CSS code must be carefully enqueued, and one of the arguments is dependency. The first example that comes to mind is a child theme that is dependent on a parent theme, i.e., its CSS only appears when the parent theme outputs.
4. You left outdated rules in the .htaccess file
Did you make any significant changes to your website, e.g., delete a caching, page builder, theme, page protection, user blocking, or CSS optimization plugin? Removed plugins or theme elements that concern web page rules usually have extra rules in the .htaccess file in your website’s root folder. If these no longer apply, they could create problems with displaying enqueued and viable CSS.
1. Make elements !important to prevent CSS from not loading (Workaround)
Do you need to ensure that a specific CSS code shows on the front end of your website? You can put !important
when editing CSS to give it more weight over other elements in other stylesheets. Making a property important will override rules applied in other stylesheets and thus ensure this specific property applies. Adding the importance to a property has a syntax like this:
H2 {color: red !important;}
p {color: blue;}
...
H2 {color: green;}
In this case, even though H2 for green loads last, the !important rule, added with space and before the semicolon, overrides its importance and all H2 will be red. If other stylesheets mention H2, those properties will also be ignored. The problem is that you may have set (or will) !important for the same element again, creating a conflict. In style designed by an experienced web designer, !important should be used sparsely or never. Properly designed stylesheets enqueue correctly thanks to arguments, dependency, and specificity. Thus, !important should be a temporary fix, and only for elements, not entire stylesheets.
2. Clear the cache or disable your WordPress caching plugin to solve CSS visibility problems
We mentioned caching and its features as frequent causes of the WordPress CSS not loading issue. Therefore, we propose clearing the WordPress cache manually or within a plugin you use and refreshing the page to see if the page loads. Also, see if you can disable any CSS-related settings such as “Minify CSS”, “Load CSS Asynchronously”, and “Rewrite URL structure”. If you see no changes, consider deactivating the plugin by either:
- Going to Plugins -> All Plugins in WordPress Admin, then click Deactivate under its name.
- Accessing your WordPress website using FTP, then going to
root/wp-content/plugins
and renaming the caching plugin to, e.g.,caching-plugin-disabled
.
That’s also a solution when CSS stops working in Admin. If CSS is still not appearing, consider temporarily turning off any CDN (Content Delivery Network), compression, and lazy loading plugins.
I disabled all CSS-oriented plugins. What else can I try?
If you disabled all plugins that concern CSS, it doesn’t hurt to try contacting your web hosting provider’s Customer Support team and inquiring about the page caching they use on their server. Request that they clear your site cache on their end.
3. Remove any outdated or unfamiliar .htaccess rules to eliminate CSS displaying problems
CSS is a rule-based language, and .htaccess is a directory-level file that defines a variety of website-access permissions in Apache and nginx systems. Thus, any out-of-date rules you added in the past, or plugins and themes you activated may have added to it. Note that your website may have two or more .htaccess files as well. We explained how to access .htaccess file in WordPress. To ensure all the settings are preserved, we propose making a copy and renaming it to .htaccess-backup. Then, replace the contents of the original file with the default .htaccess file content:
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress
If that solves the issue, start adding rules from the backup file one by one and refreshing your website in between. Once the CSS disappears again, you found the problematic line or a set of lines you need to edit or remove.
4. Enqueue stylesheets to solve the problem with CSS not showing in WordPress
The way to give stylesheets priority is to enqueue them so that WordPress knows which ones take precedence. The simplest example is a child theme style that depends on the main theme stylesheet:
wp_enqueue_style( ‘child-theme-css’,
get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-theme-css’), ‘1.0’, all );
The third argument, separated by commas, represents dependency on the main stylesheet. It also ensures that the child theme is only active when the main is. If the CSS file you added, for example, contact.css, is not loaded, you may need to ensure that the child theme is also dependent. That way, it isn’t skipped in cascading. However, the name is not enough—you need its handle. The most user-friendly way to find a CSS function handle is to:
- Install two plugins for WordPress, Debug Bar and its expansion, Debug Bar Script and Style Dependencies.
- Refresh the front end and head to the page where CSS is missing.
- Click the Debug button.
- Go to Script & Style Dependencies on the left-hand side.
- Find a handle for your CSS file.
- Add the handle in the appropriate enqueue, such as:
wp_enqueue_style( ‘child-theme-css’,
get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-theme-css’, ‘contact-css’), ‘1.0’, all );
Unsurprisingly, the stylesheet you make your CSS file depend upon (and the one in front) must be output on the front end for your CSS code to show.