--- tags: - devops - l1 - flashcard-deck - css --- [Portal](../../../../library/portal/index.md) | **Level:** [L1: Foundations](../../../../library/portal/levels.md) | **Topics:** [CSS](../../../../library/portal/topics.md) | **Domain:** DevOps & Tooling id category difficulty tags question answer source_path css/a1c2e3f4b5d6 css easy css,box-model,layout What are the four layers of the CSS box model? Content, padding, border, margin (from inside out).\n\nRemember: the CSS box model from inside out: Content -> Padding -> Border -> Margin. Mnemonic: 'Can People Build Margins?'\n\nGotcha: box-sizing: border-box includes padding and border in the width/height. Without it (content-box), padding adds to the specified width. zines/hell.yes.css.cleaned.notes css/b2d3f4a5c6e7 css easy css,display,layout What is the difference between inline and block elements? 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.\n\nRemember: 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. zines/hell.yes.css.cleaned.notes css/c3e4a5b6d7f8 css medium css,specificity,cascade What determines which CSS rule wins when multiple rules match the same element? Selector specificity, source order, and inheritance. More specific selectors win; among equal specificity, later rules win.\n\nRemember: 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.\n\nGotcha: CSS specificity wars are a sign of poorly organized styles. Use BEM naming (block__element--modifier) or CSS modules to avoid specificity conflicts. zines/hell.yes.css.cleaned.notes css/d4f5b6c7e8a9 css easy css,media-queries,responsive What are CSS media queries used for? Adapting styles based on environment conditions such as viewport width, device type, or orientation.\n\nRemember: 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.\n\nGotcha: CSS specificity wars are a sign of poorly organized styles. Use BEM naming (block__element--modifier) or CSS modules to avoid specificity conflicts. zines/hell.yes.css.cleaned.notes css/e5a6c7d8f9b0 css medium css,devtools,debugging Why is the browser CSS inspector important? 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.\n\nRemember: 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. zines/hell.yes.css.cleaned.notes css/f6b7d8e9a0c1 css medium css,flexbox,layout What is CSS Flexbox designed for? One-dimensional layout — arranging items in a row or column with flexible sizing, alignment, and distribution of space.\n\nRemember: Flexbox = 1D layout (row OR column). display: flex on parent. Key properties: justify-content (main axis), align-items (cross axis), flex-grow/shrink. zines/hell.yes.css.cleaned.notes css/a7c8e9f0b1d2 css medium css,grid,layout What is CSS Grid designed for? Two-dimensional layout — placing items in rows and columns simultaneously, with named areas and explicit track sizing.\n\nRemember: 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. zines/hell.yes.css.cleaned.notes css/b8d9f0a1c2e3 css hard css,stacking-context,z-index What is a CSS stacking context? 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.\n\nRemember: 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. zines/hell.yes.css.cleaned.notes css/c9e0a1b2d3f4 css easy css,variables,custom-properties What are CSS custom properties (variables)? User-defined values declared with -- prefix (e.g., --main-color: blue) and accessed with var(). They cascade and can be scoped to selectors.\n\nRemember: 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. zines/hell.yes.css.cleaned.notes css/d0f1b2c3e4a5 css medium css,transitions,animation What do CSS transitions do? 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).\n\nRemember: 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. zines/hell.yes.css.cleaned.notes css/e1a2c3d4f5b6 css hard css,position,layout What does position: absolute do? 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).\n\nRemember: position values: static (default), relative (offset from normal), absolute (removed from flow, relative to positioned ancestor), fixed (viewport), sticky (scroll-triggered). zines/hell.yes.css.cleaned.notes css/f2b3d4e5a6c7 css medium css,layout,containing-block Why is understanding the containing block important in CSS? 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.\n\nRemember: 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. zines/hell.yes.css.cleaned.notes css/a3c4e5f6b7d8 css easy css,fundamentals,difficulty Why is CSS often harder than it looks? Because layout modes, browser defaults, the cascade, specificity, and inheritance interact in nontrivial ways that are not obvious from simple examples.\n\nRemember: 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. zines/hell.yes.css.cleaned.notes css/b4d5f6a7c8e9 css medium css,debugging,best-practices What should you check first when debugging a CSS layout issue? 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.\n\nRemember: 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. zines/hell.yes.css.cleaned.notes --- ## Wiki Navigation ### Related Content - [CSS Fundamentals](../../../../library/topics/css-fundamentals/index.md) (Topic Pack, L0) — CSS