Layout and visual systems
CSS Interview Questions
The cascade, specificity, Flexbox, Grid, responsive design and the layout bugs that show up in real interfaces.
40 questions10 easy22 medium8 hard0/40 learned
01What is CSS and what problem does it solve?Easycss · styling · browser02Explain CSS rule syntax and how the cascade works.Easycascade · syntax · stylesheet03How does CSS specificity work?Mediumspecificity · selectors · cascade04How does inheritance work in CSS?Easyinheritance · cascade · properties05Explain the CSS box model.Easybox model · layout · box-sizing06What does the display property do?Easydisplay · formatting context · layout07Explain the position property and its values.Mediumposition · containing block · layout08How does Flexbox work?Mediumflexbox · layout · alignment09How does CSS Grid work?Mediumcss grid · layout · tracks10When should you use Flexbox versus Grid?Mediumflexbox · css grid · layout choice11What is margin collapsing and how do you control it?Hardmargin collapsing · block layout · bfc12What is the difference between px, em and rem?Hardunits · em · rem13How do viewport units work?Mediumviewport units · responsive · vh14How do percentages and intrinsic sizing interact?Hardpercentages · intrinsic sizing · containing block15How do min(), max() and clamp() work?Mediumclamp · css functions · fluid type16How do media queries work?Easymedia queries · responsive · breakpoints17How do container queries work?Mediumcontainer queries · responsive · components18What makes a design responsive?Mediumresponsive design · layout · accessibility19What does mobile-first mean in CSS?Easymobile first · responsive · breakpoints20What are pseudo-classes and when do you use them?Easypseudo-classes · selectors · state21What are pseudo-elements and what are their limits?Mediumpseudo-elements · generated content · selectors22What are CSS combinators?Easycombinators · selectors · specificity23How do CSS custom properties work?Mediumcustom properties · variables · theming24How does calc() work and when should you use it?Hardcalc · css functions · units25What color formats does CSS support?Mediumcolor · oklch · accessibility26How do you build a readable type system in CSS?Mediumtypography · fonts · readability27How does line-height work and why is unitless better?Mediumline-height · typography · inheritance28Why does z-index sometimes not work?Hardz-index · stacking context · paint order29How does the overflow property work?Mediumoverflow · scroll · layout30How do floats and clear work, and are they still used?Mediumfloat · clear · layout history31How do CSS transitions work?Mediumtransitions · animation · performance32How do CSS animations and keyframes work?Mediumanimations · keyframes · performance33How do CSS transforms work?Mediumtransforms · animation · layout34How do you use will-change without hurting performance?Hardwill-change · performance · compositor35How do cascade layers work?Hardcascade layers · specificity · architecture36How does native CSS nesting work?Mediumnesting · selectors · css architecture37What are CSS logical properties?Mediumlogical properties · writing modes · rtl38How does the aspect-ratio property work?Easyaspect-ratio · layout · media39How do you implement dark mode in CSS?Mediumdark mode · color scheme · theming40What are common CSS layout bugs and how do you debug them?Harddebugging · layout bugs · devtools
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.