“Why isn’t my CSS applying?” is almost always a specificity problem — a more specific selector elsewhere is winning, even if your rule appears later in the file.
/* Specificity roughly: inline > IDs > classes/attributes/pseudo-classes > elements */
p { color: black; } /* specificity: 0-0-1 */
.text { color: blue; } /* specificity: 0-1-0 - wins over the element selector */
#main .text { color: green; } /* specificity: 1-1-0 - wins over .text alone */
p.text#unique { color: red; } /* 1-1-1 - very specific, hard to override */
/* !important overrides normal specificity entirely - use sparingly */
.text { color: purple !important; }
The Practical Fix
When a style “isn’t working,” open browser DevTools and check the Styles panel — it shows every matching rule with strikethrough on the ones losing the specificity battle. Reaching for !important as a fix usually just moves the problem to whoever edits the CSS next; increasing a selector’s specificity deliberately, or restructuring the CSS, is almost always the better long-term fix.