# CSS Selectors, Classes and Reusable Rules

Selectors identify the HTML elements a rule styles.

~~~css
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.

~~~html
<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.