Skip to main content

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.
Back to top