Imagine you're in a crowded room and need to get someone's attention. You could:
Shout "Hey, everyone wearing blue shirts!" (targeting a group)
Call out "Hey, Sarah!" (targeting one specific person)
Say "Hey, teachers!" (targeting people by role)
CSS selectors work exactly the same way—they're how you tell the browser which HTML elements to style.
Why CSS Selectors Are Needed
You've built the skeleton of your webpage with HTML. Now you want to make it look good with CSS. But here's the challenge: how do you tell CSS which elements to style?
Without selectors, you'd have no way to say things like:
Selectors are the bridge between your HTML and your CSS styles. They let you target elements with precision, from broad sweeps (all paragraphs) to laser-focused targeting (just this one element).
Think of selectors as addresses for your HTML elements. Just like you need an address to send a letter to the right person, you need selectors to send styles to the right elements.
The Problem Selectors Solve
Without selectors:
<p style="color: blue; font-size: 16px;">This is tedious</p>
<p style="color: blue; font-size: 16px;">And repetitive</p>
<p style="color: blue; font-size: 16px;">And hard to maintain</p>
With selectors:
p {
color: blue;
font-size: 16px;
}
Much cleaner, right? That's the power of selectors.
Element Selector: Target by Tag Name
The element selector (also called the "type selector") targets all elements of a specific HTML tag.
Syntax
tagname {
property: value;
}
Examples
p {
color: gray;
line-height: 1.6;
}
h1 {
color: navy;
font-size: 32px;
}
h2 {
color: darkblue;
font-size: 24px;
}
a {
color: blue;
text-decoration: underline;
}
When to Use Element Selectors
Use element selectors when you want to style all instances of an element.
Avoid them when you need different styles for different instances.
Class Selector: Target by Class Name
The class selector is your most versatile tool.
Syntax
<p class="intro">This paragraph has a class.</p>
.intro {
font-size: 20px;
font-weight: bold;
}
Key Points About Classes
Reusable
Can be combined
Work on any element
Multiple Classes Example
<div class="box shadow rounded">Content here</div>
.box {
padding: 20px;
}
.shadow {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.rounded {
border-radius: 8px;
}
ID Selector: Target One Unique Element
The ID selector targets one unique element per page.
Syntax
<div id="header">Site Header</div>
#header {
background-color: navy;
color: white;
padding: 20px;
}
IDs Must Be Unique
<div id="header">Header section</div>
<div id="main">Main content</div>
<div id="footer">Footer section</div>
Class vs ID
Class: reusable, multiple elements -> .classname
ID: unique, one element per page -> #idname
Use classes for reusable styles.
Use IDs for unique sections or JavaScript hooks.
Group Selectors
Apply the same styles to multiple selectors.
h1, h2, h3 {
font-weight: bold;
color: #333;
}
Descendant Selectors
Target elements based on where they live in the HTML structure.
.article p {
color: gray;
}
This only styles paragraphs inside .article.
Selector Specificity (Priority)
When multiple rules apply, CSS decides based on specificity:
Inline styles > IDs > Classes > Elements
More specific rules win. If specificity is equal, the last rule wins.
Putting It All Together
<header id="site-header">
<nav>
<a href="#" class="nav-link active">Home</a>
<a href="#" class="nav-link">About</a>
</nav>
</header>
#site-header {
background: #333;
}
.nav-link {
color: white;
}
.nav-link.active {
background-color: #555;
}
Key Takeaways
Selectors target HTML elements
Classes are reusable and flexible
IDs are unique and specific
Group and descendant selectors reduce repetition
Specificity determines which rule wins
Practice Exercises
Style one paragraph differently using a class
Style navigation links using descendant selectors
Create reusable card styles with classes
Style header and footer using IDs
Your Next Steps
Practice regularly, inspect elements using browser dev tools, and experiment with selector combinations.
Selectors are the foundation of CSS. Master them, and styling becomes predictable and powerful.
