Debugging CSS

In plain English

The cascade is the set of rules the browser uses to decide which declaration wins when several could apply, and specificity is how it weighs selectors so more specific rules beat less specific ones. In the devtools Styles pane you can see every rule that targets an element and which declarations are crossed out, while the Computed pane shows the final value the browser actually uses. When a rule seems to do nothing, the usual causes are a typo, an overridden declaration, or a selector that does not match the element.

Step by step

1. 1Open devtools, select an element and look at its Styles pane.
2. 2Find a crossed-out declaration and read why it lost.
3. 3Open the Computed pane to see the final resolved value.
4. 4Check that the selector matches the element, then check its specificity.

.title {
  color: #000000;
}

.card .title {
  color: #6b7280;
}

.card {
  padding: 1rem;
  color: #374151;
}

Common mistakes

• Beginners often type a selector that does not match any element and then assume CSS is broken.
• A common mistake is adding !important instead of finding the real specificity conflict.
• Spelling a property or value wrong is a frequent cause of rules that silently do nothing.
• Expecting the last rule in the file to always win is wrong when an earlier rule is more specific.