CSS Selectors, Classes and Reusable Rules

Selectors identify the HTML elements a rule styles.
body { margin: 0; }
h1 { color: #123f73; }
.card { border: 1px solid #cbd5e1; }
#main-search { max-width: 40rem; }
nav a:hover,
nav a:focus-visible { text-decoration: underline; }
Use element selectors for broad defaults, classes for reusable components and IDs mainly for unique relationships or scripting. Avoid selectors tied to one accidental nesting structure.
<article class="card">
  <h2>Team summary</h2>
</article>
Cascade and specificity
When rules conflict, source order and specificity decide which applies. Prefer simple classes over repeated 
!important.
Check
 Class names describe purpose.
 Repeated designs reuse the same class.
 Focus styles are not removed.
 Selectors remain understandable.