CSS · Layout and visual systems
Explain CSS rule syntax and how the cascade works.
Short answer
A rule is a selector list plus a declaration block. The cascade decides which declaration wins by origin and importance, then cascade layers, specificity, and finally source order.
A style rule has a selector, a declaration block, and declarations made of a property and value. At-rules such as @media, @supports and @font-face wrap rules or describe resources rather than selecting elements directly.
.button,
.link {
color: white;
background: navy;
}
@media (min-width: 48rem) {
.button {
padding: 1rem 1.5rem;
}
}Cascade order
- Origin and importance: user-agent, author and user styles, with !important reversing the normal order
- Cascade layers: later layers win for normal declarations, earlier layers win for important ones
- Specificity: the more specific selector wins within the same origin and layer
- Scope proximity, then order of appearance as the final tie-breaker
Inheritance is a separate mechanism. The cascade decides between declarations that actually match an element; inheritance only supplies a value when no declaration matches for an inherited property.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What are the steps of the cascade in order?
- 2How do cascade layers change the outcome?
- 3Where does inheritance fit into the cascade?
- 4Why can source order matter even with equal specificity?
Say it in the interview
A CSS rule is a selector plus a declaration block, and at-rules wrap rules for conditions or resources. The cascade resolves conflicts by origin and importance first, then layers, then specificity, and finally source order. Inheritance is separate: it only fills in a value when nothing is declared for an inherited property. Knowing that order is usually faster than adding more specificity.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.