If you’ve ever added CSS styles to a website and found they just aren’t applying on the front end, then you’ve likely got a parsing error. This guide can help you determine where the parsing error is coming from and how to fix it.
For this How To, I created a child theme of the Twenty TwentyOne WordPress theme and added some buggy styles to the Additional CSS stylesheet.
Yield: Fix CSS Bugs
How to find and Fix CSS Parsing Errors
Prep Time:
1 minute
Active Time:
1 minute
Additional Time:
1 minute
Total Time:
3 minutes
Difficulty:
Intermediate
If you've ever added styles to a website and found they just weren't applying on the front end, then you've likely got a parsing error. This guide can help you determine where the parsing error is coming from and how to fix it.
Materials
- Website
Tools
- Chrome Dev Tools
- CSS Validator
Instructions
- Rule Out Caching as the cause
Clear your Plugin Cache's and your Server Cache and review the page in an incognito window. If you have cleared all cache's and still cannot see your styles applied to the front end, then you've likely got a CSS Bug. - Find the element and style using the Elements tab and Styles tab in Chrome Dev Tools
- View the source code by right clicking on the web page
- Review the order of stylesheets in the head tag
Keep the Source tab open and review the stylesheets being loaded in. - Review the styles that are actually being applied to the element and the stylesheets the styles are coming from
If a stylesheet doesn't appear in the Styles tab, but it appears in the head tag, then that stylesheet may be the issue.
Now you need to validate the styles in this missing stylesheet to see if this stylesheet has a Parsing error. - Copy the styles into a CSS Validator
- Paste the styles into the CSS Validator at this link
- Hit "Check" and see the styles with parsing errors
This image indicates that the parsing error occurs before the style I am looking for. - Fix the style sheet if you have access to it. Or contact the developer to alert them of the bug.
In this image, we see where the missing bracket has caused an error to occur. I can immediately see the difference in this example.
Notes
Don't forget to clear your cache's and check the styles in an incognito window.
Photo by James Wainscoat on Unsplash
Jump