Basic Selectors

Element, class, id

p selects every <p>. .name selects any element with class="name". #name selects the one element with id="name".

Three selectors in action

Class selectors are the most reused in real stylesheets.

p { line-height: 1.6; }

.highlight {
  background-color: yellow;
}

#header {
  font-size: 24px;
}

Reusable vs unique

A class can be used on many elements; an id should appear once per page. Prefer classes for styling — save ids for JS hooks and anchors.