Top 25 CSS Interview Questions

The CSS Box Model describes every element as a rectangular box with four areas: content (innermost), padding (space between content and border), border, and margin (outermost space between elements). The total width = content + padding + border + margin.

content-box (default) ? width/height applies to content only; padding and border are added on top. border-box ? width/height includes content, padding, and border. border-box makes layout calculations much easier and is widely used.

* { box-sizing: border-box; } /* recommended global reset */

• Inline styles ? highest specificity (1,0,0,0)
• ID selectors ? (0,1,0,0)
• Class, attribute, pseudo-class selectors ? (0,0,1,0)
• Element and pseudo-element selectors ? (0,0,0,1)
• !important overrides all specificity (avoid using it).

• Flexbox ? one-dimensional layout (row OR column). Best for component-level layouts and aligning items along one axis.
• CSS Grid ? two-dimensional layout (rows AND columns). Best for page-level layouts.
• They complement each other ? use Grid for the overall layout and Flexbox for components within.

• Pseudo-classes (:) ? select elements based on state: :hover, :focus, :nth-child(), :first-child, :not(), :checked.
• Pseudo-elements (::) ? style specific parts of an element: ::before, ::after, ::first-line, ::first-letter, ::placeholder.

a:hover { color: blue; }\np::first-line { font-weight: bold; }

• relative ? positioned relative to its normal position; still occupies space.
• absolute ? removed from flow; positioned relative to nearest positioned ancestor.
• fixed ? removed from flow; positioned relative to the viewport; stays on scroll.
• sticky ? hybrid of relative and fixed; sticks when it reaches a scroll threshold.

z-index controls the stacking order of positioned elements (position other than static). Higher z-index appears on top. z-index only works on positioned elements. Elements in the same stacking context are compared; nested stacking contexts are treated as a unit.

CSS custom properties (--variable-name) store reusable values. They cascade and can be overridden in nested scopes. Accessed with var().

:root {\n  --primary: #38bdf8;\n  --spacing: 16px;\n}\n\n.btn {\n  background: var(--primary);\n  padding: var(--spacing);\n}

display: none removes the element from the document flow ? it takes up no space. visibility: hidden hides the element visually but it still occupies its space in the layout.

Media queries apply styles based on device characteristics like screen width, height, orientation, or resolution. They are the foundation of responsive design.

@media (max-width: 768px) {\n  .container { flex-direction: column; }\n}\n@media (prefers-color-scheme: dark) {\n  body { background: #0f172a; }\n}

• px ? absolute pixels.
• em ? relative to the font-size of the parent element.
• rem ? relative to the root (html) font-size. Preferred for consistent scaling.
• vw/vh ? percentage of viewport width/height. Useful for full-screen layouts.

Specificity is calculated as a 4-part value (a,b,c,d): a=inline styles, b=IDs, c=classes/attributes/pseudo-classes, d=elements/pseudo-elements. The selector with the highest value wins. Equal specificity ? the last rule wins (cascade).

The cascade determines which CSS rule applies when multiple rules target the same element. Priority order: !important > inline styles > specificity > source order. The browser also applies user-agent (browser default) styles at the lowest priority.

• Container: display:flex, flex-direction, flex-wrap, justify-content, align-items, align-content, gap.
• Items: flex-grow, flex-shrink, flex-basis, flex (shorthand), align-self, order.
• justify-content aligns along the main axis; align-items aligns along the cross axis.

CSS Grid creates a two-dimensional layout system.

.grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: auto;\n  gap: 16px;\n}\n.item { grid-column: 1 / 3; /* span 2 columns */ }

• transition ? animates a property change from one state to another (triggered by state change like :hover). Simple, two-state.
• animation ? uses @keyframes to define multi-step animations that can loop, delay, and run automatically.

/* Transition */\n.btn { transition: background 0.3s ease; }\n.btn:hover { background: blue; }\n\n/* Animation */\n@keyframes spin { to { transform: rotate(360deg); } }\n.loader { animation: spin 1s linear infinite; }

• block ? takes full width, starts on new line, respects width/height/margin.
• inline ? takes only content width, no new line, ignores width/height/top-bottom margin.
• inline-block ? inline flow but respects width/height/margin like a block.

When two rules have equal specificity, the one that appears later in the stylesheet wins (cascade order). !important overrides all specificity but should be avoided as it makes debugging difficult.

:root selects the highest-level parent element (the <html> element). It has higher specificity than html selector. Commonly used to define CSS custom properties (variables) that are globally accessible.

object-fit controls how an <img> or <video> fills its container. Values: fill (default, stretches), contain (fits inside, letterbox), cover (fills, crops), none (original size), scale-down.

img {\n  width: 300px;\n  height: 200px;\n  object-fit: cover; /* fills box, crops edges */\n}

Padding is the space between the content and the border (inside the element). Margin is the space outside the border (between elements). Margins can collapse (adjacent vertical margins merge into the larger one); padding never collapses.

clamp(min, preferred, max) sets a value that scales between a minimum and maximum. Commonly used for fluid typography.

h1 { font-size: clamp(1.2rem, 4vw, 2.5rem); }

will-change hints to the browser that an element will be animated, allowing it to optimize rendering in advance (e.g., promote to a GPU layer). Use sparingly ? overuse wastes memory.

• CSS Reset ? removes all browser default styles, giving a blank slate. Can be too aggressive.
• Normalize.css ? preserves useful browser defaults while fixing inconsistencies across browsers. More practical approach.

:nth-child(n) selects the nth child of its parent regardless of type. :nth-of-type(n) selects the nth sibling of the same element type. They differ when mixed element types are present.