Why CSS Changes Are Not Showing on Website

CSS files often don’t update on the site after uploading due to caching at different levels: browser, server, CDN, or due to problems with file transfer via FTP/SFTP. Main solutions include hard page reload, clearing cache, checking correct file paths, changing file names when necessary, and configuring HTTP caching headers.

Contents

• Main causes of the problem
• Solutions for browser caching
• Issues with file transfer via WinSCP
• Server and CDN caching
• HTTP headers configuration
• File path verification
• File name hack
• Conclusion

Main causes of the problem

When CSS changes don’t display after uploading files to the server, it’s usually related to caching at one or more levels:

• Browser caching - the browser saves a local copy of the CSS file and doesn’t request a new version from the server
• Server caching - the web server (Apache, Nginx) may cache files to improve performance
• CDN caching - if using Cloudflare or other CDN services, they may store old versions of files
• File transfer issues - files may be uploaded to the wrong directory or not overwritten properly
• HTTP caching headers - the server sends headers that instruct the browser to cache files for a long time

As noted by Mozilla Developer Network, browsers actively use caching to optimize performance, which sometimes prevents developers from seeing current changes.

Solutions for browser caching

Hard page reload

The most common method is to use a hard refresh, which forces the browser to ignore the cache and reload all files:

• Windows/Linux: Ctrl + F5 or Ctrl + Shift + R
• Mac: Cmd + Shift + R or Cmd + Option + R

As explained on Stack Overflow, “Hold down Ctrl and press F5. In Apple Safari: Hold down ⇧ Shift and click the Reload toolbar button.”

Clear browser cache

If hard refresh doesn’t help, try completely clearing the browser cache:

1. Open developer tools (F12)
2. Go to the “Network” section
3. Check the “Disable cache” box for the current session
4. Or use standard clearing through browser settings

According to Super User, “None of the refresh options or developer tools methods mentioned here worked for me. What solved it for me was cache busting.”

Issues with file transfer via WinSCP

Verify correct file paths

Make sure you’re uploading the file to the correct directory on the server. As noted in WinSCP FAQ:

“Make sure the server/location you are FTP uploading, is the same with the one you are reaching at with HTTP”

Try opening the CSS file directly in the browser via URL to make sure you’re editing the correct file.

File timestamp issues

Sometimes the server can’t determine that the file has been modified due to timestamp issues:

“Make sure the timestamp of uploaded file has proper value, so that the web server can recognize the file has changed. As a last resort solution you may try to disable Preserve timestamp transfer setting to let remote server to keep the upload time as the last modification time of the file.” [source]

In WinSCP, check file transfer settings and make sure timestamps are correctly transferred to the server.

Server and CDN caching

Server caching

Web servers often cache static files to improve performance. If the issue isn’t in the browser, check caching settings on the server:

“If it is cached on the server, there is nothing you can do in the browser to fix this. You have to wait for the server to reload the file.” [source]

For Apache server, check the .htaccess file, for Nginx - configuration files.

CDN caching (Cloudflare and others)

If your site uses CDN services, they may cache CSS files:

“you forget to enable it before you start making modifications then you can purge cache from cloudflare management.” [source]

In the Cloudflare control panel, find the “Cache” section and clear the cache for your site.

HTTP headers configuration

Check the HTTP headers being sent with CSS files:

“If you are not specifying a cache header it will likely try to cache for you. Set an expires header (in the past) when in development, but far in the future when in production.” [source]

For development, you can add to the .htaccess file:

<Files "*.css">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</Files>

This will force the browser to always request a fresh version of the CSS file.

File path verification

Sometimes the issue might be that the browser is loading the CSS file from a different location than you expect:

“Verify that the css file that the browser is loading the file you think is should load.” [source]

To check this:

1. Open developer tools (F12)
2. Go to the “Network” tab
3. Refresh the page
4. Find the CSS file in the list
5. Check the URL and response status (200 OK from cache or 200 OK from server)

As noted on Reddit, “a 200 status means that it wasn’t refreshed but pulled from cache”.

File name hack

A temporary solution that often works - change the CSS file name and update the links in HTML:

“I changed the file name of the CSS file and changed the file paths on my website pages and it updated the styling. I suspect this is some sort of cacheing issue but not something I can fix on my end.” [source]

This method confirms that the issue is indeed caching and forces the browser to load the new version of the file.

Sources

1. WinSCP FAQ - Web Cache Issues
2. Stack Overflow - CSS file not refreshing in browser
3. Super User - How to make Chrome reload all JS and CSS
4. Mozilla Developer Network - Browser Caching
5. Stack Overflow - CSS changes are not getting reflected
6. Web Hosting Talk - CSS file not updating
7. Reddit - CSS will not update on Hostgator
8. WordPress Stack Exchange - CSS not updating in browser

Conclusion

The main issues related to CSS not updating after uploading files to the server:

1. Browser caching - use hard refresh (Ctrl+F5) or clear the cache completely
2. File transfer issues - make sure files are uploaded to the correct directory and overwritten
3. Server caching - check caching settings on the web server or wait for automatic update
4. CDN caching - clear cache in the Cloudflare control panel or other CDN service
5. HTTP headers - configure caching headers for development so the browser always requests fresh versions

To prevent such issues in the future, it’s recommended to include file versions in URLs (cache busting) or use development tools with caching disabled. Always verify that you’re editing the correct file by opening it directly in the browser via URL.