Selectors

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Be able to use element, class, and ID selectors

Selectors are CSS's "selection committee." You use a selector to precisely pick which element gets styled. Element selector picks every element that shares the same tag name. Class selector is commonly used for reusable styles. ID selector is meant for a single unique element, but in large CSS projects, sticking with class selectors makes maintenance much easier.

css

/* Element selector: all paragraphs */
p {
  text-align: center;
}

/* ID selector: one unique element */
#main-title {
  color: blue;
}

/* Class selector: reusable style */
.important-text {
  font-weight: bold;
  color: tomato;
}

You should see

All <p> elements will be center-aligned. The element with id="main-title" will turn blue. Elements with class="important-text" will become bold and turn tomato-colored.

Warning

You shouldn't reuse the same ID more than once on a page. For reusable styling, using class instead is much cleaner.