CSS Selectors (Element, Class & ID)

In Plain English

Selectors are how CSS finds the HTML elements you want to style. You can target all elements of a tag (e.g., p), specific groups using classes (.btn), or unique single items using IDs (#navbar).

The Mental Model

"Element selectors are like saying "All humans in this room". A class selector is like saying "Everyone wearing a blue hat (.blue-hat)". An ID selector is calling someone by their national passport number (#passport-123)."

Deep Dive: How It Works

Element Selector (p, h1, button): Styles EVERY instance of that tag on the entire page.

Class Selector (.highlight, .card): Starts with a dot. Reusable across as many elements as you want! This is what 95% of modern CSS uses.

ID Selector (#main-header): Starts with a hash (#). Must be unique to exactly one element on the page.

Grouping Selectors: You can apply the same styles to multiple selectors with commas: h1, h2, h3 { font-family: sans-serif; }.

Syntax Blueprint

/* Element */ p { color: white; }
/* Class */   .badge { background: #0284c7; }
/* ID */      #logo { width: 120px; }

No prefix for tag names, dot (.) for classes, hash (#) for IDs.

Core Rules to Remember

Classes are Reusable: Always prefer classes for UI components and reusable design patterns.

The Dot Rule: In HTML write class="card", but in CSS always write .card with a dot.

Avoid IDs for Styling: IDs have high specificity and cannot be reused, making them clunky for CSS.

Common Beginner Traps & How to Fix Them

Mistake:Putting a dot inside the HTML class attribute

Why it happens: Writing <div class=".btn"> in HTML.

How to fix: In HTML write class="btn", only put the dot in your CSS file: .btn { ... }.

Pro Tip: An HTML element can have multiple classes separated by spaces: <button class="btn btn-primary btn-large">.

Live Interactive Example

Hit Run Code to see it live

Element, Class, and ID Selectors

CSS3

Live Browser Preview

Click "Preview / Apply" to view the rendered output.

How it works: .badge styles reusable tags while #hero-title targets one specific element.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Write a class selector

Write a CSS rule targeting the class .card that sets background-color: #2b2d31;

Browser Preview & Output

Click "Run & Check" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

Deep Dive: How It Works

Element Selector (p, h1, button): Styles EVERY instance of that tag on the entire page.

Class Selector (.highlight, .card): Starts with a dot. Reusable across as many elements as you want! This is what 95% of modern CSS uses.

ID Selector (#main-header): Starts with a hash (#). Must be unique to exactly one element on the page.

Grouping Selectors: You can apply the same styles to multiple selectors with commas: h1, h2, h3 { font-family: sans-serif; }.