CSS Selectors

Selectors tell CSS which HTML elements to style: by tag name, by class, or by id.

HTML & CSSbeginner6 min read

A CSS rule has a selector and a block of declarations. The selector picks elements; each declaration sets one property, like color or font-size.

CSS

p {
  color: navy;
}

.highlight {
  background: yellow;
}

#main-title {
  font-size: 2rem;
}

Three basic selectors

p selects every paragraph (a type selector).
.highlight selects elements with class="highlight". Many elements can share a class.
#main-title selects the one element with id="main-title". An id must be unique on the page.

Prefer classes for styling. They are reusable and easier to manage than ids.

Styling with a class · HTML

<style>
  .note { color: green; }
</style>
<p class="note">Saved!</p>
<p>Normal text</p>

Expected output

"Saved!" appears in green; "Normal text" keeps the default color.

Common mistake: Forgetting the dot for classes

Write .note in CSS for class="note". Without the dot, CSS looks for a <note> element instead.

CSS Selectors · CodeChallenge