Question 1

What is the box model?

Accepted Answer

Every element is a box: content, padding, border, margin, from inside out. By default (box-sizing: content-box) width/height apply to content only. With border-box, padding and border are included inside the width/height.

Question 2

What does box-sizing: border-box do?

Accepted Answer

Makes width and height include padding and border, not just content. This makes sizing predictable and is standard in most modern CSS resets applying border-box to all elements globally.

Question 3

Explain the position types (static/relative/absolute/fixed/sticky).

Accepted Answer

static: default, in normal flow. relative: offset from its normal position, still occupies space. absolute: removed from flow, positioned relative to nearest non-static ancestor. fixed: relative to viewport, stays on scroll. sticky: hybrid — in flow until it hits a scroll threshold, then sticks.

Question 4

What are the basics and main properties of Flexbox?

Accepted Answer

Flexbox is a 1D layout system. Container properties: display flex, flex-direction, justify-content for the main axis, align-items for the cross axis, gap, flex-wrap. Item properties: flex-grow, flex-shrink, flex-basis, align-self, order.

Question 5

When to use Grid vs Flexbox?

Accepted Answer

Flexbox: 1D layout (row OR column) — nav bars, card rows, aligning items in a line. Grid: 2D layout (rows AND columns) — page layouts, complex grids. They complement each other; use Grid for the macro layout and Flexbox for component-level layout.

Question 6

How is CSS specificity calculated?

Accepted Answer

Inline styles beat ID selectors, which beat class/attribute/pseudo-class selectors, which beat element/pseudo-element selectors. The !important modifier overrides everything (use sparingly). Higher specificity wins; equal specificity means the last declared rule wins.

Question 7

What's the difference between display:none, visibility:hidden and opacity:0?

Accepted Answer

display:none removes the element from layout, invisible, not accessible. visibility:hidden is invisible but still occupies space, not accessible to screen readers. opacity:0 is invisible but occupies space AND is still accessible/clickable.

Question 8

What's the difference between px, em, rem and %?

Accepted Answer

px: absolute pixels. em: relative to the parent's font-size (compounds through nesting). rem: relative to the root html font-size — predictable, preferred for font sizes and spacing. %: relative to the parent's dimension.

Question 9

What's the difference between pseudo-class and pseudo-element?

Accepted Answer

A pseudo-class (:hover, :focus, :nth-child) targets an element in a specific state. A pseudo-element (::before, ::after, ::first-line) targets a virtual sub-part of an element. Pseudo-elements use the double-colon syntax in modern CSS.

Question 10

What is z-index and stacking context?

Accepted Answer

z-index controls layer order on the Z axis (who appears on top). It only works on positioned (non-static) elements. A stacking context is created by certain properties (position with z-index, opacity less than 1, transform, etc.) — z-index comparisons are relative within the same stacking context.

Question 11

How do CSS custom properties (variables) work?

Accepted Answer

Declared with a double-dash prefix, e.g. a custom property holding a color value, and referenced with the var() function elsewhere in the stylesheet. Scoped to the element and its descendants; global scope is typically declared on the root element. Can be updated via JavaScript and respond to media queries.

Question 12

What's the difference between transition and animation?

Accepted Answer

transition: triggered by a state change (hover, focus, class toggle) — interpolates between two states. animation: runs autonomously with keyframes, can loop, has timing control and multiple steps. Use transitions for simple interactive feedback, animations for complex or auto-playing motion.

Question 13

What is margin collapsing?

Accepted Answer

Adjacent vertical margins of block elements merge into one (the larger one). Happens between sibling blocks, and between a parent and its first/last child if no border/padding separates them. Does NOT happen with flex/grid children or horizontal margins.

Question 14

How do you center an element horizontally and vertically?

Accepted Answer

With Flexbox: set the parent to display flex with justify-content and align-items both centered. With Grid: set the parent to display grid with place-items centered. With absolute positioning: position the element absolutely at 50%/50% and offset it back by half its own size with a transform. Margin auto also works for horizontal centering of block elements with a fixed width.

Question 15

What is the mobile-first approach and what is a media query?

Accepted Answer

Mobile-first: write base styles for small screens, then use min-width media queries to add styles for larger screens. This is the opposite of desktop-first. Media queries apply rules conditionally based on viewport size, orientation, resolution, etc.

Question 16

What is CSS @layer and cascade layers for?

Accepted Answer

@layer lets you explicitly define the cascade order of style groups, preventing specificity wars between, e.g., base styles, component styles, utilities, and third-party CSS. Lower layers are overridden by higher layers regardless of specificity.

Question 17

What does @container (container queries) provide?

Accepted Answer

Container queries allow styling an element based on its parent container's size (not the viewport). This enables truly component-level responsive design, where a card component can change layout based on the width of whatever container it's placed in.

Question 18

What can the :has() selector do?

Accepted Answer

:has() is a "parent selector" — it selects an element based on its children, for example styling a form differently if it contains an invalid input. This was previously impossible in pure CSS.

Question 19

When are CSS containment and content-visibility needed?

Accepted Answer

The contain property restricts what changes inside an element can affect outside it, improving browser rendering performance. content-visibility: auto tells the browser to skip rendering off-screen elements entirely until they are near the viewport — a significant performance gain for long pages.

Question 20

What is subgrid and how does it differ from Grid?

Accepted Answer

Subgrid allows a grid child to participate in and align to its parent grid's tracks instead of creating its own independent grid. Solves alignment across nested components (e.g., card grids with varying content heights).