Troubleshooting CSS

Have you created custom CSS for your Team Showcase but haven’t been able to see those styles when viewing your site? A few common issues can cause CSS to not appear correctly on a site.

Have you saved the file? #

It seems obvious but absolutely worth double-checking.

Clear your cache #

You’ll want to clear two, possibly three, caches: your site’s cache, browser, and server cache (if you have one). You may not be aware of a server cache, but some hosts, such as SiteGround and WPEngine, use server-level caching to speed up websites.

Clearing your cache is the browser equivalent of turning it off and on again.

Check for spelling/syntax errors #

Is the selector spelled correctly? Are the punctuation and spacing correct in descendant selectors(i.e., is it nav.class instead of nav .class?

Another classic would be to forget to close the declaration so your CSS looks like this:

p {
    color: #fff
    font-size: 1rem;
}

Notice how the color Is missing the semicolon? That means the CSS file will read that code like this:

color: #ffffont-size: 1rem;

Urgh!

Does your rule appear in the inspector? #

Does it have a line through it? If so, your selector needs to be more specific.

In Chrome’s DevTools, the Computed tab can show you what’s being rendered by the browser and the rules being applied to a specific element: really handy for tracking down inheritance and specificity issues.

Does the style you’re overriding have an !important in it? #

Or is the style declared in the HTML element (e.g. <div style="color: #fff;">)? If so, you can only override that with another. !important.

Is the element inheriting a default browser style? #

This could be anything, so check the inheritance in the inspector.

Is the element wider/taller than you’d expected? #

It might need box-sizing: border-box; applied to it so that the width and height are calculated based on the size of the border-box rather than the content box (the default).

Is it a browser incompatibility issue? #

This is much less of an issue than it used to be but worth checking if the issue is replicated in another browser. The website caniuse.com is a great tool to help with this as well.

Have you validated it? #

If you’ve got this far and nothing has worked, it might be worth popping it into the CSS Validator to check its valid CSS. CSS Lint is another resource to check out that will give some additional feedback on what you’ve written.

Try replicating the CSS and basic HTML structure in a tool like Codepen #

If it works there but not on your site, you’re likely dealing with an issue of inheritance or specificity. This is especially likely if you’re using a framework or template.

More advanced checks #

If the rule is shown in the inspector, but it’s not taking effect, there’s probably something not quite right.

Have you applied the rule to the correct element? #

Often things need to be applied to the parent element, especially things related to the display or position properties.

Does the element have the right value for display? #

It’s always worth checking the display property, especially if it’s inline, inline-block or block. This might fix the issue, especially if you’re trying to apply a property that’s incompatible (or has no effect) when applied to the wrong one.

Can you apply that property to the element? #

Not all properties can be applied to all elements. :visited is a good example of this, but there are lots of others.