Selectors: Picking What to Style
Target elements based on their attributes and use the universal selector effectively.
Selectors: Picking What to Style is a free CSS Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Pick your target
Before styling, you point at what to style. That's a selector's job. This lesson makes it click, I promise. ✨
Like pointing a finger
A selector is just you pointing: "this thing, right here." Simple as that. No memorizing required.
Style by tag
The easiest selector uses a tag name. Write "p" and you select every paragraph on the page at once.
p {
color: red;
}Style by class
Want to style just some elements? Give them a class and select it with a dot, like .note. Super flexible!
.note {
color: orange;
}Classes are reusable
The best part: one class can be reused on many elements. Style once, apply everywhere. Big time-saver. ⏱️
Style by id
Need one special element? Give it an id and select it with a hash, like #header. An id is meant to be unique.
#header {
color: navy;
}Dot vs hash
Quick memory trick: a dot is for many (class), a hash is for one (id). Tag names use no symbol at all.
Like name tags
Think of classes as group name tags and ids as a single VIP badge. Selectors just read those tags. 🏷️
Mix and match
Real pages combine tags, classes, and ids to style exactly what they want. You now know all three! 🙌
You did it!
You can name what CSS is, read a rule, and pick targets with selectors. That's a real CSS foundation. Proud of you! 🎉
Quick Check
Final check! Which symbol do you use to select a class in CSS?
Frequently asked questions
Is the “Selectors: Picking What to Style” lesson free?
Yes — the full text of “Selectors: Picking What to Style” is free to read here on the web, and the CSS Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Selectors: Picking What to Style”?
Target elements based on their attributes and use the universal selector effectively. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Selectors: Picking What to Style” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- What is CSS?
- How CSS Brings Pages to Life
- Selectors: Picking What to Style