Web Analytics
☕ Coffee 𝕏 Follow
0%

CSS Selectors Basics

Beginner ~8 min read

What are Selectors?

Selectors are patterns used to target HTML elements you want to style. Think of them as the "address" that tells CSS which elements to apply styles to.

1. Element Selector

The element selector targets all elements of a specific type. Use the element name directly.

HTML
CSS
JS

2. Class Selector

The class selector targets elements with a specific class attribute. Use a dot (.) followed by the class name. Classes are reusable - multiple elements can have the same class.

HTML
CSS
JS
Tip: Use classes for styling elements that appear multiple times. They're the most commonly used selector!

3. ID Selector

The ID selector targets a single unique element with a specific id attribute. Use a hash (#) followed by the ID name. IDs must be unique on a page.

HTML
CSS
JS

Selector Comparison

Selector Syntax Use Case
Element p { } All elements of that type
Class .highlight { } Reusable styles
ID #header { } Unique elements
Best Practice: Use classes for most styling. Reserve IDs for JavaScript or unique page sections.

Quick Quiz

Which selector is best for styling multiple elements with the same style?

A
Element selector
B
Class selector
C
ID selector
D
All are the same
Previous Adding CSS
Next Colors