CSSEasy
What is the CSS box model?
Every element is a box made of content, padding, border and margin. The default content-box size counts only the content; border-box includes padding and border in the width you set.
Intern 路 Junior 路 CSS Layout
Frontend 路 Intern to senior
CSS Interview Questions and Answers
CSS interviews check that you can build and debug layouts without guessing: how the box model and specificity work, when to use Flexbox or Grid, and how positioning and units behave.
Download CSS PDF9 questions
9 questions
- CSSEasy
What is the difference between display none and visibility hidden in CSS?
display: none removes the element from the layout so it takes no space; visibility: hidden hides it but leaves the empty space, and the element can still be read in the accessibility tree in some cases.
Intern 路 Junior 路 CSS Layout - CSSEasy
What is the difference between inline, block and inline-block in CSS?
Block elements start on a new line and take the full available width; inline elements sit in the text flow and ignore width and height; inline-block sits in the flow but accepts width, height, padding and margin on all sides.
Intern 路 Junior 路 CSS Layout - CSSEasy
What is the difference between em, rem, %, vh and vw in CSS?
em is relative to the parent font size, rem is relative to the root font size, % is relative to the parent鈥檚 relevant size, and vh/vw are 1% of the viewport height or width.
Junior 路 Mid-level 路 CSS Layout - CSSMedium
What is the difference between relative, absolute, fixed and sticky positioning in CSS?
Relative offsets an element from its normal place; absolute positions it against the nearest positioned ancestor; fixed is against the viewport; sticky sits in normal flow until a scroll threshold, then sticks.
Junior 路 Mid-level 路 CSS Layout - CSSMedium
What is the difference between Flexbox and CSS Grid?
Flexbox is one-dimensional (a row or a column). CSS Grid is two-dimensional (rows and columns at once). Use Flexbox for alignment along a line; use Grid when the layout is a real 2D structure.
Junior 路 Mid-level 路 CSS Layout - CSSMedium
How does CSS specificity work?
Specificity is the score the browser uses to decide which rule wins: inline styles beat IDs, IDs beat classes/attributes/pseudo-classes, and those beat elements. When scores tie, the last rule in the source wins.
Junior 路 Mid-level 路 CSS Layout - HTMLMedium
How does the browser render a web page?
The browser parses HTML into a DOM and CSS into a CSSOM, combines them into a render tree, computes layout (reflow), paints pixels and composites layers onto the screen.
Mid-level 路 Senior 路 Browser & DOM - HTMLHard
What are Core Web Vitals and how do you improve them?
Core Web Vitals are Google鈥檚 field metrics for real-user experience: LCP (loading), INP (interactivity) and CLS (visual stability). They influence search ranking and are measured on real devices, not only Lighthouse.
Senior 路 Performance