Selectors¶

A selector targets the HTML element you want to style. There are three core selectors every beginner should know.

Element Selector¶

Targets every instance of an HTML tag.

p {
  color: gray;
}

This styles every <p> element on the page.

Targets elements with a matching class attribute. Reusable across multiple elements.

.card {
  background: white;
  padding: 16px;
}

<div class="card">Hello</div>
<div class="card">World</div>

Targets a single unique element with a matching id attribute.

#header {
  font-size: 24px;
}

<h1 id="header">Welcome</h1>

IDs must be unique

Only use an ID once per page. For reusable styles, use a class instead.

Selector	Syntax	Use when...
Element	`p`	Styling all instances of a tag
Class	`.name`	Reusing styles across multiple elements
ID	`#name`	Targeting one unique element