In the early days, when I started using CSS, I was very frustrated. It just never seemed to work – all the changes I made in the CSS styles never seemed to take effect in the site.
Today, after a long acquaintance with Cascading Style Sheets (commonly called CSS), I am a lot calmer. This does not mean I do not have any CSS issues, but I do have a method which helps me solve most problems.
In this guide I will describe this method, in the hope that it will save you time and grief.
When you make a change to CSS but do not see the page changes, answer the following guiding questions in order to find out what the problem is.
Is the browser trying to retrieve the file?
Sometimes the browser will not try to retrieve the stylesheet file from the server. To identify this problem, use the built-in Network tab in your browser Developer Toolbar (by pressing F12) or a dedicated HTTP packet sniffer like Fiddler or HttpWatch.
This will allow you to see all the requests (and responses) that pass between your browser and the server. This is what it looks like in Chrome :
If you do not see the file listed here, make sure that:
- The HTML reference to the CSS file is written well. Look at the source code that comes to the browser (right-click and View Source) and check that it is written like this:
<link rel="stylesheet" href="http://site.com/path/stylesheetname.css" type="text/css" media="all">
- The resource path (“href” attribute in the above line) points to the correct URL of the stylesheet file.
Does it succeed?
If the browser is trying to retrieve the file, but fails, it can happen for several reasons. Look at the response Status Code to see what the problem is. Here are some common error codes:
- 404: Resource can’t be found. This is likely because the stylesheet path is wrong, look again in the “href” attribute of the stylesheet link and make sure it is correct.
- 401: Access denied. Make sure your CSS is placed inside a public folder and is accessible to the world (try to point your browser directly to it). If not, most likely the path is not correct in which case you should treat it as 404.
- 500: Server error. This can be caused if there is some kind of server side mechanism which handles CSS links (for bundling and minifying for example). Make sure your site if running and configured properly and that are no exceptions in the logs.
Is it cached?
Caching is a way of storing a static copy of the resource (in this case, a stylesheet file) in order to improve performance. This can be happening inside the browser or on the server. In order to make sure you are not getting a cached version of the stylesheet, look at the response:
If its 304 or there is “from cache” label (in Chrome it’s under the “size” column) than it’s cached. When it’s cached, the normal methods of reloading the page will not work, including:
- Clicking on the address bar and pressing enter key.
- Clicking the reload icon in the address bar.
- Pressing F5 (refresh key)
Instead, do the following in order to force the browser to use the new version:
- Press Ctrl+F5 which will force the browser to load the CSS from the server.
- Clean the browser cache (in Chrome its under History > Clear browsing data).
- If you use Chrome Developer Toolbar, there is a setting under Network Tab to disable caching while the Developer Toolbar is open.
In order to be sure the browser is retrieving the latest version of the file, look at the response and make sure it contains your changes:
Is the browser using the updated stylesheet?
After you made sure that the browser is getting the updated version of your stylesheet, the next step is to make sure it actually uses it. Sometimes the browser fetches the stylesheet but does not use it, usually because of syntax errors.
You can find which stylesheet Chrome is actually using by clicking on the Sources tab and navigating to your CSS file:
Or if you are using Firefox or Internet Explorer you can use the CSS tab:
After you found it, make sure that:
- The file content matches the updated version on your server.
- Some classes may be missing – which means that the browser did not load them. This can happen because of a syntax problem in the class (for example a missing curly brace), or a bad name (some browsers have problems with class names beginning with “_”, for example).
Only from this point on you can be sure that the site uses your updated classes.
Do the selectors find the element?
So, you’re sure that the browser is using the updated stylesheet, but still do not see the desired style in the page. What could be the issue?
In many cases, the problem is with the selectors. The selectors determine which elements the CSS class will affect. If they do not find their target element it can explain why the element does not look as desired.
- Use the Inspect command inside the Developer Toolbar and click on the target element. In the list on the right you should see all the classes that apply to it. Make sure your style is in there with the correct values.
- In some browsers, the names of the classes are Case Sensitive, which can cause problems. As a rule of thumb, always use lower case letters when giving names to classes (separated with “-“).
Is your class being overridden?
If you reached this point, and still do not see the style changes you made in the page, this means your class is being overridden.
Cascading Style Sheets are, well, cascading. This means that if another class is closer (at the hierarchical level) or later (in time) to the target element, it will override your class. In order to see it use the Computed view and look at the strike-through lines and make sure your rules are not being overridden:
Congratulations, at this point you should finally see the effect of your style!
And if you have any more tips to solve the problem of missing styles, please share them here in comments.