Skip to Content

My CSS Styles Aren’t Applying on the Front End, Help!

My CSS Styles Aren’t Applying on the Front End, Help!

Sharing is caring!

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.

child theme screenshot

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.

How to find and Fix CSS Parsing Errors
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

  1. 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.
  2. Find the element and style using the Elements tab and Styles tab in Chrome Dev Tools
    style isn't showing in dev tools
  3. View the source code by right clicking on the web page
    view page source
  4. Review the order of stylesheets in the head tag
    review the order of stylesheets in head tag
    Keep the Source tab open and review the stylesheets being loaded in.
  5. Review the styles that are actually being applied to the element and the stylesheets the styles are coming from
    shows code that is working in dev tools for this style
    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.
  6. Copy the styles into a CSS Validator
    copy CSS with errors
  7. Paste the styles into the CSS Validator at this link
    paste code into validator and hit check
  8. Hit "Check" and see the styles with parsing errors
    validator shows parse error elements
    This image indicates that the parsing error occurs before the style I am looking for.
  9. 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

Did you try this project?

Please leave a comment on the blog or share a photo on Instagram

Skip to Instructions