The trump card. Bypasses normal specificity math completely. Use in real coding only for utility classes or overriding stubborn third-party libraries. Overuse destroys maintainability.
.hidden { display: none !important; }
Targets a unique element via its `#id`. Highly specific. 100 classes cannot beat a single ID. Best used for major page landmarks or JavaScript hooks, less for general styling.
#header-nav { background: #000; }
Targets elements via `.class`, `[attribute]`, or `:hover`. The workhorse of modern CSS. Perfect for building reusable UI components and interactive states.
.btn:hover { background: gold; }
Targets raw HTML tags like `div`, `p`, or `button`. The weakest hand. Best used for setting baseline typographical styles or broad resets at the top of a stylesheet.
p { line-height: 1.6; }