Before you can style anything, you need to be able to select it. CSS gives you a rich set of selectors — from the simple to the very specific.

Element Selectors

The most basic selector targets all elements of a given type:

p {
  color: #374151;
  line-height: 1.7;
}

h1 {
  font-size: 2rem;
  font-weight: 900;
}

This applies the styles to every <p> and <h1> on the page.

Class Selectors

Class selectors let you target specific elements by their class attribute. Prefix the class name with a dot:

.card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

Then in your HTML:

<div class="card">I am a card!</div>

One element can have multiple classes, and multiple elements can share the same class.

ID Selectors

ID selectors target a single unique element by its id attribute. Prefix with a #:

#header {
  background: #0f172a;
  padding: 1rem 2rem;
}

<header id="header">...</header>

Attribute Selectors

You can target elements based on their attributes:

/* Links that open in a new tab */
a[target="_blank"] {
  color: #6367ff;
}

/* Inputs of type email */
input[type="email"] {
  border: 1.5px solid #e5e7eb;
}

Descendant and Child Selectors

Target elements that are inside other elements:

/* Any p inside a .card (descendant) */
.card p {
  font-size: 0.9rem;
}

/* Only direct children */
.nav > a {
  font-weight: 600;
}

Pseudo-classes

Pseudo-classes apply styles based on element state or position:

a:hover {
  color: #5254e8;
  text-decoration: underline;
}

button:focus {
  outline: 2px solid #6367ff;
  outline-offset: 2px;
}

li:first-child {
  font-weight: bold;
}

li:last-child {
  border-bottom: none;
}

Combining Selectors

You can apply the same styles to multiple selectors at once by separating them with commas:

h1, h2, h3 {
  font-family: sans-serif;
  color: #0f172a;
}

Putting It All Together

Here's how selectors work in practice — a card component styled with multiple selector types:

<div class="card">
  <h2>CSS Selectors</h2>
  <p>Selectors tell the browser <em>which elements</em> to style.</p>
</div>

.card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  font-family: sans-serif;
  max-width: 320px;
}

.card h2 {
  font-size: 1.2rem;
  color: #0f172a;
  margin: 0 0 8px;
}

.card p {
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

My Favourite Recipe

This is my all-time favourite pasta dish.
It's incredibly simple to make.

Ingredients
You'll need spaghetti, garlic, olive oil, and parmesan.

Instructions
Cook the pasta. Meanwhile, fry the garlic in oil.
Combine and serve.