Learning overview
- Estimated time
- 4 minutes
- Difficulty
- Intermediate
- Prerequisites
- Learn CSS: From Selectors to Responsive Interfaces · CSS Projects: 7 Builds for Responsive Layout Skills
- Learning outcome
- Explain css using a clear mental model · Apply css in practical CSS work
- Last updated
- July 18, 2026
Core answer
The cascade resolves competing declarations by considering relevance, origin and importance, cascade layers, specificity, scoping proximity, and source order. Specificity matters only after higher-priority cascade criteria tie.
The box model consists of content, padding, border, and margin. With border-box, declared width and height include padding and border; margin remains outside. This often makes component dimensions easier to reason about.
Flexbox is primarily one-dimensional and excels at distributing and aligning items along a main axis. Grid is two-dimensional and defines relationships across rows and columns. The content relationship, not personal preference, should choose the layout system.
Worked example
When asked to debug a color conflict, identify the actual winning rule instead of assuming that a longer selector always wins.
@layer reset, components, utilities;
@layer components {
.button { color: white; background: navy; }
}
@layer utilities {
.text-dark { color: #172033; }
}Follow-up questions
Strong interviews test whether you can apply the idea, not only recite a definition. Practice answering these out loud.
- What creates a new stacking context?
- Why might min-width: 0 fix overflow in a flex item?
- How do auto-fit and auto-fill differ in Grid?
- When does margin collapse occur?
- What is the difference between absolute, fixed, and sticky positioning?
- How do rem, em, percent, vw, and container units differ?
- Why can an element’s z-index appear not to work?
- How would you build a mobile-first layout?
- Which CSS properties are cheapest to animate?
- How do you preserve focus visibility and reduced-motion preferences?
Frequently asked questions
How should I practice CSS interview questions?
Explain the browser model, sketch a small example, predict the result, and verify it with developer tools. Practice diagnosing failures, not only reciting definitions.
Do CSS interviews require memorizing every property?
No. Know core layout, cascade, sizing, responsive, and accessibility systems deeply, and show that you can verify uncommon details reliably.
Topic graph
A taxonomy-generated path through this subject.
Related courses
Related learning
Recommended automatically from shared technologies, topics, intent, and difficulty.
Related Guides
Related Tutorials
Related Glossary
Related Cheatsheets
Related Projects
Related Interview Questions
Related reading
Hand-picked companion pages that deepen this topic.
Your next steps