Interview Prep | CSS
CSS Interview Questions

Entry, Mid, and Advanced CSS questions with short answers. Use search to filter questions quickly.

Entry Mid Advanced
🔍
• Entry Level

CSS Entry Level Q&A

Back to Top ↑
🎨
Q1. What is the box model?
A. Content + padding + border + margin. By default width/height apply to the content box.
Entry
🎨
Q2. What does box-sizing: border-box do?
A. It makes width/height include padding and border, simplifying layout sizing.
Entry
🎨
Q3. What is the cascade?
A. Rules compete by origin/importance, specificity, and source order to decide final styles.
Entry
🎨
Q4. How does specificity work?
A. IDs > classes/attributes/pseudo-classes > elements. Higher specificity wins (then later source order).
Entry
🎨
Q5. Difference between display: block and inline?
A. Block starts a new line; inline flows with text and typically ignores width/height.
Entry
🎨
Q6. What is margin collapsing?
A. Adjacent vertical margins of blocks can collapse into a single margin.
Entry
🎨
Q7. Pseudo-class vs pseudo-element?
A. Pseudo-classes select states (:hover). Pseudo-elements select parts (::before).
Entry
🎨
Q8. em vs rem?
A. em is relative to current element/parent font-size; rem is relative to root font-size.
Entry
• Mid Level

CSS Mid Level Q&A

Back to Top ↑
⚡
Q1. Flexbox main axis vs cross axis?
A. justify-content aligns along the main axis; align-items aligns along the cross axis (depends on flex-direction).
Mid
⚡
Q2. When to use Grid vs Flexbox?
A. Grid for 2D layouts (rows+cols). Flexbox for 1D layout (row or column).
Mid
⚡
Q3. How do media queries work?
A. They apply styles based on conditions like viewport width, prefers-reduced-motion, etc.
Mid
⚡
Q4. What is position: sticky?
A. It behaves like relative until a scroll threshold then sticks like fixed within its container.
Mid
⚡
Q5. What creates a stacking context?
A. Examples: position with z-index, transform, opacity < 1, filter, and more.
Mid
⚡
Q6. How do you center an element?
A. Common: flex (justify-content/align-items), grid (place-items), or margin: 0 auto for blocks.
Mid
⚡
Q7. What are CSS variables?
A. Custom properties like --color used via var(--color). They cascade and can be updated dynamically.
Mid
⚡
Q8. What is z-index?
A. Controls stacking order inside a stacking context. Requires understanding of stacking contexts.
Mid
• Advanced Level

CSS Advanced Level Q&A

Back to Top ↑
🚀
Q1. Why is !important risky?
A. It breaks normal cascade reasoning and can cause specificity wars. Prefer better structure and component scoping.
Advanced
🚀
Q2. How do you optimize CSS performance?
A. Reduce expensive selectors, avoid forced reflow patterns, keep animations to transform/opacity, and minimize unused CSS.
Advanced
🚀
Q3. What are container queries?
A. They apply styles based on a container size (not the viewport), enabling component responsiveness.
Advanced
🚀
Q4. Repaint vs reflow?
A. Reflow recalculates layout; repaint redraws pixels. Layout changes can be costly.
Advanced
🚀
Q5. How do you avoid z-index bugs?
A. Understand stacking contexts, keep z-index scales small, and avoid unnecessary transforms on parents.
Advanced
🚀
Q6. What is BEM?
A. A naming convention (Block__Element--Modifier) that improves maintainability and reduces conflicts.
Advanced
🚀
Q7. What is :has() useful for?
A. It enables parent selection based on descendants, but consider browser support and performance.
Advanced
🚀
Q8. What is subgrid?
A. A Grid feature where a nested grid can align to the parent grid tracks (support varies).
Advanced