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.