Css¶
20 cards — 🟢 5 easy | 🟡 7 medium | 🔴 2 hard
🟢 Easy (5)¶
1. What are the four layers of the CSS box model?
Show answer
Content, padding, border, margin (from inside out).Remember: the CSS box model from inside out: Content -> Padding -> Border -> Margin. Mnemonic: 'Can People Build Margins?'
Gotcha: box-sizing: border-box includes padding and border in the width/height. Without it (content-box), padding adds to the specified width.
2. What is the difference between inline and block elements?
Show answer
Block elements take the full available width and start on a new line. Inline elements only take as much width as needed and flow within text.Remember: the browser renders CSS in order: parse HTML -> build DOM -> parse CSS -> build CSSOM -> combine into render tree -> layout -> paint -> composite. Understanding this pipeline helps debug rendering issues.
3. What are CSS media queries used for?
Show answer
Adapting styles based on environment conditions such as viewport width, device type, or orientation.Remember: modern CSS layout uses Flexbox (1D) and Grid (2D). Float-based layouts are legacy. For most layouts, start with Flexbox; use Grid for complex 2D arrangements.
Gotcha: CSS specificity wars are a sign of poorly organized styles. Use BEM naming (block__element--modifier) or CSS modules to avoid specificity conflicts.
4. What are CSS custom properties (variables)?
Show answer
User-defined values declared with -- prefix (e.g., --main-color: blue) and accessed with var(). They cascade and can be scoped to selectors.Remember: the browser renders CSS in order: parse HTML -> build DOM -> parse CSS -> build CSSOM -> combine into render tree -> layout -> paint -> composite. Understanding this pipeline helps debug rendering issues.
5. Why is CSS often harder than it looks?
Show answer
Because layout modes, browser defaults, the cascade, specificity, and inheritance interact in nontrivial ways that are not obvious from simple examples.Remember: the browser renders CSS in order: parse HTML -> build DOM -> parse CSS -> build CSSOM -> combine into render tree -> layout -> paint -> composite. Understanding this pipeline helps debug rendering issues.
🟡 Medium (7)¶
1. What determines which CSS rule wins when multiple rules match the same element?
Show answer
Selector specificity, source order, and inheritance. More specific selectors win; among equal specificity, later rules win.Remember: modern CSS layout uses Flexbox (1D) and Grid (2D). Float-based layouts are legacy. For most layouts, start with Flexbox; use Grid for complex 2D arrangements.
Gotcha: CSS specificity wars are a sign of poorly organized styles. Use BEM naming (block__element--modifier) or CSS modules to avoid specificity conflicts.
2. Why is the browser CSS inspector important?
Show answer
It shows the actual applied and computed styles on elements, rather than guessing from source code. It reveals specificity conflicts, inherited values, and box model dimensions.Remember: the browser renders CSS in order: parse HTML -> build DOM -> parse CSS -> build CSSOM -> combine into render tree -> layout -> paint -> composite. Understanding this pipeline helps debug rendering issues.
3. What is CSS Flexbox designed for?
Show answer
One-dimensional layout — arranging items in a row or column with flexible sizing, alignment, and distribution of space.Remember: Flexbox = 1D layout (row OR column). display: flex on parent. Key properties: justify-content (main axis), align-items (cross axis), flex-grow/shrink.
4. What is CSS Grid designed for?
Show answer
Two-dimensional layout — placing items in rows and columns simultaneously, with named areas and explicit track sizing.Remember: CSS Grid = 2D layout (rows AND columns). display: grid on parent. grid-template-columns: 1fr 2fr 1fr creates a 3-column layout with the middle twice as wide.
5. What do CSS transitions do?
Show answer
They animate the change of a CSS property value over a specified duration, creating smooth visual effects when a property changes (e.g., on hover).Remember: the browser renders CSS in order: parse HTML -> build DOM -> parse CSS -> build CSSOM -> combine into render tree -> layout -> paint -> composite. Understanding this pipeline helps debug rendering issues.
6. Why is understanding the containing block important in CSS?
Show answer
Because percentage-based sizing, absolute positioning, and some layout calculations are resolved relative to the containing block. Getting it wrong causes elements to size or position unexpectedly.Remember: the browser renders CSS in order: parse HTML -> build DOM -> parse CSS -> build CSSOM -> combine into render tree -> layout -> paint -> composite. Understanding this pipeline helps debug rendering issues.
7. What should you check first when debugging a CSS layout issue?
Show answer
Check which layout mode is active (block, flex, grid, positioned) using the inspector. Most CSS confusion comes from not knowing which layout mode is controlling the element.Remember: the browser renders CSS in order: parse HTML -> build DOM -> parse CSS -> build CSSOM -> combine into render tree -> layout -> paint -> composite. Understanding this pipeline helps debug rendering issues.
🔴 Hard (2)¶
1. What is a CSS stacking context?
Show answer
A three-dimensional conceptualization of HTML elements along the z-axis. Elements within a stacking context are painted together, and z-index only competes within the same stacking context.Remember: the browser renders CSS in order: parse HTML -> build DOM -> parse CSS -> build CSSOM -> combine into render tree -> layout -> paint -> composite. Understanding this pipeline helps debug rendering issues.
2. What does position: absolute do?
Show answer
Removes the element from normal document flow and positions it relative to its nearest positioned ancestor (an ancestor with position set to anything other than static).Remember: position values: static (default), relative (offset from normal), absolute (removed from flow, relative to positioned ancestor), fixed (viewport), sticky (scroll-triggered).