CSS Specificity — Complete Guide
CSS Specificity — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of CSS Tutorial on Toolliyo Academy.
On this page
CSS Tutorial · Lesson 10 of 100
CSS Specificity
Foundations & Layout → Responsive & Motion → Architecture & Perf → Projects
Foundations & Layout · 1 — Style · ~12 min read · CSS — Foundations
1. Introduction
Today: CSS Specificity. Read the diagram, paste the CSS, then change one value and watch the UI update.
Specificity decides which rule wins when selectors overlap — inline styles beat ids, ids beat classes, classes beat elements. !important overrides normal cascade (use sparingly).
2. Real-world story
Old banking CSS uses #content .table td — new tokens cannot override.
Outcome: Refactoring to lower-specificity classes unblocks design system rollout.
3. Why it matters
StyleVerse theme overrides fail when utility classes lose to overly specific legacy selectors. Teams track specificity to avoid fighting the cascade.
4. Visual understanding
Read this diagram — the mental model for CSS Specificity.
winner when rules conflict inline style > #id > .class > element (0,1,0,0) (0,0,1,0) (0,0,0,1) Prefer classes — avoid !important
5. Key concepts (easy words)
| Idea | Meaning |
|---|---|
| What | Specificity decides which rule wins when selectors overlap — inline styles beat ids, ids beat classes, classes beat elements. !important overrides normal cascad |
| Remember | Inline > id > class > element. Later rules tie-break equal specificity. Avoid !important except rare overrides. |
| Practice tip | Change one property, refresh, watch DevTools Computed. |
6. How it works
- Plain p is least specific. #footer p beats .text-muted for footer paragraphs. .alert !important wins unless another !important is more specific.
- Inline > id > class > element.
- Later rules tie-break equal specificity.
- Check the result in DevTools → Computed and the box model overlay.
7. Choose wisely
| Option | Notes |
|---|---|
| Do | Practice CSS Specificity on a small StyleVerse card |
| Avoid | Copying huge frameworks before learning core CSS |
8. Try this example
Paste into a <style> block (or use Run Example). Refresh to see StyleVerse UI changes.
p { color: #333; }
.text-muted { color: #888; }
#footer p { color: #555; }
.alert { color: #c62828 !important; }Line walkthrough
| Code | What it means |
|---|---|
p { color: #333; } | Selector — picks which elements get these declarations. |
.text-muted { color: #888; } | Selector — picks which elements get these declarations. |
#footer p { color: #555; } | Selector — picks which elements get these declarations. |
.alert { color: #c62828 !important; } | Selector — picks which elements get these declarations. |
Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
9. Another real-world angle
10. Best practices checklist
- Prefer classes over ids for reusable StyleVerse components.
- Use design tokens (CSS variables) for color and spacing.
- Mobile-first media queries; test keyboard focus.
- Keep specificity low — avoid !important except rare overrides.
- Animate transform/opacity when you can; respect prefers-reduced-motion.
11. Common mistakes
- Sprinkling !important to fix bugs — creates unmaintainable CSS.
- Long chained selectors beating simple utility classes unintentionally.
12. Practice in the browser
- Add footer with p inside and class text-muted.
- See which color applies in Computed styles.
- Remove !important from .alert and predict winner.
- Use :where() to zero specificity when needed.
Experiments
- Add p.text-muted inside #footer and check computed color.
- Replace #footer p with footer .text-muted for lower specificity.
13. FAQ
Where should I put CSS for CSS Specificity?
Start in a <style> block or styles.css linked from HTML. Later use CSS Modules, Tailwind, or tokens in a design system.
Why is my rule not applying?
Check selector match, typos, specificity, and whether a more specific rule or inline style wins. DevTools Computed tells the truth.
Flexbox or Grid for this?
Flex for one direction (toolbars, card rows). Grid for two-dimensional page frames. Many UIs use both.
14. Interview questions
Explain CSS Specificity simply.
Specificity decides which rule wins when selectors overlap — inline styles beat ids, ids beat classes, classes beat elements. !important overrides normal cascade (use sparingly).
How do you debug CSS?
Inspect element, toggle declarations, read Computed styles, outline the box model, and reduce specificity conflicts.
How does this show up in production UI?
Refactoring to lower-specificity classes unblocks design system rollout.
15. Remember
- Inline > id > class > element.
- Later rules tie-break equal specificity.
- Avoid !important except rare overrides.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
