Why Won't My CSS Do What It's Told?

When a CSS Change Appears to Do Nothing

It is a familiar website development problem.

You change a CSS rule, refresh the page and... nothing happens.

The obvious reaction is to question the CSS you have just written. Is the selector wrong? Has the stylesheet loaded? Is the browser showing a cached version?

Sometimes one of those explanations is correct. But sometimes your CSS is perfectly valid.

The browser is simply applying another rule instead.

Understanding the CSS Cascade

CSS stands for Cascading Style Sheets, and the word cascading matters.

A webpage can have several CSS declarations that could potentially style the same element. The browser has to determine which declaration takes precedence.

That decision can be affected by factors including origin and importance, cascade layers, selector specificity, scoping proximity and source order. Inheritance can also affect the value an element receives when a property is not set directly.

So when a CSS property appears to be ignored, the useful question is not simply:

“Why isn't my CSS working?”

It is:

“Which CSS rule is the browser actually applying, and why?”

CSS Specificity Can Override the Rule You Expected

Different CSS selectors can carry different levels of specificity.

Where competing declarations have reached the specificity stage of the cascade, a more specific selector can take precedence over a less specific one. The CSS you are looking at can therefore appear completely reasonable in isolation while still losing to another declaration.

Adding an even more specific selector may make the immediate problem disappear, but repeatedly escalating specificity can make a stylesheet increasingly difficult to understand and maintain.

Finding the rule that is already winning is usually a better starting point.

MDN's guide to CSS specificity provides the detailed technical reference.

Inline Styles and !important

Some conflicts can be particularly stubborn.

Normal inline styles take precedence over other normal author styles, while an !important declaration changes the normal cascade order. These mechanisms are related to specificity, but they are not simply additional specificity points.

Adding another !important may appear to solve the immediate problem, but it can create another layer of conflict and make future maintenance harder.

Before adding another override, it is worth understanding why the existing declaration is taking precedence.

Use Browser DevTools to Find the Winning CSS Rule

Modern browser developer tools make this much easier to diagnose.

Inspect the element that is not behaving as expected and examine the styles being applied to it.

DevTools can show the relevant CSS declarations, where they came from and which properties have been overridden by another rule.

Instead of guessing which stylesheet or selector is responsible, you can see the cascade working directly in the browser.

That often turns a frustrating CSS problem into a much simpler investigation.

Fix the Cause, Not Just the CSS Symptom

Once the conflicting rule has been identified, the appropriate fix becomes much clearer.

Perhaps a selector is unnecessarily specific. Perhaps an inline style is left over from an earlier implementation. Perhaps an !important declaration is no longer needed. Or perhaps the stylesheet structure itself could be simplified.

The objective is not merely to force the browser to obey the latest rule.

It is to understand why one declaration is winning, then make the smallest appropriate change.