CSS Specificity: Why Your Styles Aren't Applying

There’s nothing more frustrating in CSS than writing a style, inspecting the element, and seeing it crossed out. That’s a specificity issue. CSS rules have a weight system. Inline styles (style='...') have the highest weight. IDs (#header) are very specific. Classes (.button), attributes, and pseudo-classes have medium weight. Element selectors (div, p) have the lowest weight. If two rules conflict, the one with the higher specificity wins. If they are equal, the one that appears later in the CSS file wins. When I was starting out, I used to over-rely on !important to fix conflicts, which created a nightmare of maintenance. Instead, the solution is usually to write more specific selectors or to change the order of your stylesheets. Understanding this cascade is what separates beginners from developers who can maintain large CSS codebases without tearing their hair out.