What is it?
CSS describes how HTML looks. You write rules — a selector and a list of properties — and the browser applies them through three filters: the cascade (which rule wins), specificity (how strong each selector is), and inheritance (what children pick up from parents). Almost every CSS bug lives in one of those three.
Why it matters
CSS is the layer where most "frontend" interviews actually probe depth. Anyone can copy a Tailwind class. Reading why a rule isn't applying — or why two rules conflict — separates juniors from people who can debug their own code without Stack Overflow.
What to learn
- Selectors: type, class, id, attribute, pseudo-classes, combinators
- The cascade: source order, specificity,
!important(and why to avoid it) - The box model: content, padding, border, margin,
box-sizing - Display modes: block, inline, inline-block — what each does
- Units: px, rem, em, %, vh/vw, ch, fr, clamp()
- Inheritance: which properties pass down and which don't
Common pitfall
Reaching for !important to win a specificity war. It's an admission you
don't know which rule is fighting yours. Learn to read the cascade in
devtools (Computed tab, Styles tab strikethroughs) and you'll almost
never need it.
Resources
Primary (free):
- MDN — CSS first steps · docs
- web.dev — Learn CSS · docs
- CSS Specificity calculator · tool
Secondary (paid):
Practice
Pick a small component (a card, a button group, a navigation bar). Style it three different ways: with type selectors, with classes, with utility classes. Compare the specificity of each. Done when you can predict which rule wins without opening devtools.
Outcomes
- Read a CSS rule and predict its specificity score in your head.
- Walk through the cascade for any computed style in devtools.
- Pick the right unit (rem vs px vs %) for any given property.
- Avoid
!importantin 99% of cases — and explain when it's actually warranted.