Loading...

CSS Selectors

A CSS rule needs two jobs: who to style, and how. You already practiced the “how” with properties, values, and units. This session focuses on the “who” — the selector at the start of the rule.

What are CSS selectors?

CSS selectors are patterns that match HTML elements so the browser knows where to apply a declaration block. If the selector matches an element in the page, that element gets the styles inside the { } block.

Basic selector types at a glance

Start with these four. Later sessions add combinators, attributes, and pseudo-classes — first get confident with element, class, id, and *.

📊 Basic CSS selectors

Selector Matches Example
Element (type) All elements with that tag name p { … }
Class Elements with that class attribute .card { … }
Id The element with that unique id #hero { … }
Universal Every element (use sparingly) * { … }

Element (type) selectors

An element selector is simply the tag name — no dots, no hashes. h1 styles every <h1> on the page. p styles every paragraph. This is the broadest everyday tool when you want a consistent baseline for a tag.

Element selectors for headings and paragraphs

css
CSS Code 
h1 {
color: #0f766e;
font-size: 2rem;
}

p {
color: #334155;
line-height: 1.6;
}

When type selectors help

Use them for site-wide defaults: body text color, heading weight, list spacing. When only some paragraphs should look special, prefer a class instead of restyling every p.

Class selectors

A class selector starts with a dot (.) plus the class name. In HTML you mark elements with class="card". One class can appear on many elements — that is why classes are the workhorse of reusable design.

Class selector for reusable cards

css
CSS Code 
.card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 1rem;
border-radius: 8px;
}

HTML must match the class name

The CSS .card only styles elements that actually have class="card" (or multiple classes that include card). Spelling must match exactly — .Card and .card are different.

Id selectors

An id selector starts with a hash (#) plus the id name. In HTML you use id="hero". An id should be unique on the page — one element only. Prefer classes for most styling; reserve ids for a single landmark you truly mean once.

Id selector for a unique banner

css
CSS Code 
#hero {
min-height: 40vh;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}

The universal selector (*)

The universal selector * matches every element. It is sometimes used for a simple reset (for example setting box-sizing), but styling everything with colors or margins can fight your layout. Prefer targeted selectors for everyday look-and-feel.

Universal selector used carefully

css
CSS Code 
* {
box-sizing: border-box;
}

Putting selectors together on a page

Real stylesheets mix types: defaults with element selectors, reusable pieces with classes, and rare unique targets with ids. This tiny sheet shows the habit — not every rule needs an id.

Small page mix of selector types

css
CSS Code 
body {
font-family: Georgia, serif;
margin: 0;
}

.card {
max-width: 28rem;
margin: 1rem;
}

#hero {
padding: 2rem;
}

Class vs id — a practical habit

  • Prefer classes for buttons, cards, nav links, and anything you might reuse
  • Use an id when the target is truly unique (one page banner, one main search box)
  • Do not invent a new id for every styled box — that fights reuse and later cascade lessons

Try it yourself

  1. Add an <h1>, two <p> tags, a <div class="card">, and a <section id="hero"> to a practice page.
  2. Write an element rule for h1 and p.
  3. Style .card with padding, a light background, and a border.
  4. Style #hero with a dark background and light text.
  5. Optional: add * { box-sizing: border-box; } and notice that padding behaves more predictably inside the card.

Common mistakes

  • Writing card { } when you meant .card { } — missing the dot means “element named card,” which HTML does not have
  • Writing hero { } instead of #hero { } — missing the hash
  • Putting class="card" in HTML but spelling .crd in CSS — no match, no styles
  • Giving many elements the same id — invalid HTML and unpredictable targeting
  • Using only type selectors for one-off designs so every p or div changes when you meant one block

Summary

  • Selectors choose which HTML elements receive the rule’s styles
  • Element selectors use the tag name (h1, p)
  • Class selectors use a leading dot (.card) and match class in HTML
  • Id selectors use a leading hash (#hero) and should target one unique element
  • * matches everything — useful for careful resets, not for all decoration
  • Prefer classes for reusable UI; keep ids rare and unique

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial