DEVPREP CODEX · #03

CSS Interview Questions

150 curated questions graded from Foundations (Easy) to Practical Patterns (Medium) and Internals & Architecture (Hard).

TOTAL QUESTIONS

150

THEORY QUESTIONS

150

IMPLEMENTATION FOLIOS

FREE QUESTIONS

5 / Level

Easy Level·50 Questions Total

Foundations & Core Concepts

Open Full Easy List

Q1What is CSS, and how do you link it to an HTML document?

CSS: Cascading Style Sheets. Defines the presentation, design, and layout of an HTML document.
Linking Methods:
1. External (Preferred): <link rel="stylesheet" href="styles.css"> inside <head>.
2. Internal: Inside a <style> block in <head>.
3. Inline: Directly inside the HTML element using the style attribute (e.g., <div style="color: red;">).

Q2What are the different types of CSS selectors?

Element Selector: Targets all matching HTML elements (e.g., p { }).
Class Selector: Targets elements with a matching class name, prefixed with a dot (e.g., .card { }).
ID Selector: Targets a single element with a matching ID, prefixed with a hash (e.g., #header { }).
Universal Selector: Targets every element on the page (e.g., * { }).
Attribute Selector: Targets elements based on attribute values (e.g., [type="text"] { }).

Q3Compare class, ID, and element selectors in terms of specificity.

ID Selector: Highest specificity among the three. Represented as 0,1,0,0.
Class Selector: Moderate specificity. Includes classes, attributes, and pseudo-classes. Represented as 0,0,1,0.
Element Selector: Lowest specificity. Includes elements and pseudo-elements. Represented as 0,0,0,1.
Result: ID rules override class rules, and class rules override element rules.

Q4Explain the standard CSS Box Model.

Definition: Every element is rendered as a rectangular box consisting of four concentric layers.
Layers (from inside out):
1. Content: The actual text, images, or child elements.
2. Padding: Transparent area surrounding the content, inside the border. Affected by background styles.
3. Border: Outer edge of the padding box.
4. Margin: Transparent space outside the border separating the element from adjacent sibling elements.

Q5What does `box-sizing: border-box` do, and why is it preferred?

content-box (Default): Set width and height apply only to the content. Adding padding or borders increases the element's actual physical size on screen (total width = width + padding + border).
border-box: Set width and height incorporate the content, padding, and border. Adding padding/border shrinks the content area but keeps the overall box size fixed.
Benefit: Simplifies layout calculations and prevents unexpected design overflows.

45 More Easy Questions Locked

Unlock the complete CSS Easy question bank

Get instant access to all 50 questions, in-depth model answers, code sandboxes, and all 27+ technologies for a single one-time payment.

Unlock All — One-time payment · Lifetime access

Medium Level·50 Questions Total

Mechanisms & Practical Patterns

Open Full Medium List

Q1Explain the CSS Multi-Column Layout model.

Purpose: Flows standard text content across multiple vertical columns seamlessly, mimicking newspaper layouts.
Properties:
- column-count: Explicit number of columns to generate.
- column-width: Ideal/target width of each column.
- column-gap: Sets the gutter spacing between columns.
- column-rule: Creates a vertical divider border between columns.

Q2What are the CSS mathematical functions `min()`, `max()`, and `clamp()`?

min(val1, val2): Selects the smallest value. Useful for setting fluid elements that shouldn't overflow screen widths (e.g., width: min(100%, 800px)).
max(val1, val2): Selects the largest value. Ensures elements don't shrink past a set minimum.
clamp(min, preferred, max): Locks a value between a hard minimum and maximum limit, scaling smoothly with the middle percentage value (e.g., font-size: clamp(1rem, 2.5vw, 3rem)).

Q3Contrast alignment properties in Flexbox and CSS Grid.

justify-content: Aligns flex items/grid columns along the main axis (horizontally).
align-items: Aligns flex items/grid tracks along the cross axis (vertically) in a single row.
align-content: Aligns multiple rows of flex containers/grid rows along the cross axis when there is extra space.
justify-items: Grid only. Aligns cell contents horizontally within their individual grid cell area.

Q4What is a Block Formatting Context (BFC), and how is it created?

Definition: An isolated layout region of a webpage where block boxes are laid out. Margin collapsing only occurs within the same BFC.
BFC prevents: Collapsing margins with parent elements and floating elements from overflowing their containers.
Creation methods:
- Setting overflow: hidden, auto, or scroll (other than visible).
- Setting display: flow-root (the modern explicit way to create BFC).
- Floating elements (float: left/right).
- Position values absolute or fixed.
- Flex or Grid items.

Q5How does the `calc()` function work in CSS?

Function: Performs mathematical calculations directly in CSS property values.
Rules:
- Supports mixed units (e.g., width: calc(100% - 40px)).
- Operator Spacing: Plus (+) and minus (-) operators must be surrounded by white spaces (e.g., calc(100%-40px) is invalid) so the parser doesn't mistake them for negative signs. Multiplication (*) and division (/) do not require spaces.

45 More Medium Questions Locked

Unlock the complete CSS Medium question bank

Get instant access to all 50 questions, in-depth model answers, code sandboxes, and all 27+ technologies for a single one-time payment.

Unlock All — One-time payment · Lifetime access

Hard Level·50 Questions Total

Internals & System Architecture

Open Full Hard List

Q1Detail how browser engines partition coordinates in the CSS Box Alignment model.

Mechanism: The Box Alignment model parses layout geometries based on two coordinate systems: Writing Mode (determining inline and block directions) and Flex/Grid Axis (main vs cross axes).
Partitioning: The rendering engine divides parent containers into alignment subjects (the cells or items) and alignment contexts (the grid tracks or flex rows). Math engines compute empty space (Container - Sum(Item Sizes)), and then distribute offsets based on alignment values (space-between, space-around).
Optimization: Box Alignment calculations are integrated into the browser's layout reflow stage. Un-dimensioned layouts cause layout recursive backtracking, degrading CPU speeds.

Q2What is CSS Houdini, and how do Paint Worklets function?

CSS Houdini: A suite of low-level APIs that expose the browser's CSS parsing and rendering engine pipelines directly to developers.
Paint API: Allows developers to write JavaScript code called Paint Worklets that run inside the browser's paint engine stage.
Usage: Developers can draw custom background canvas graphics, custom grids, or border patterns directly inside CSS properties using background: paint(my-worklet-name);. It bypasses the DOM entirely, running off the main thread at near-native graphics speeds.

Q3How do styling choices impact the Cumulative Layout Shift (CLS) metric?

Un-dimensioned Replaced Elements: Media tags (images, videos, iframes) without explicit width and height attributes force the parser to perform a layout reflow when the media file finishes downloading.
Custom Font Files (FOIT/FOUT): When web fonts download slowly, the browser first draws fallback system fonts. Once the custom font is ready, it swaps. Since character widths differ, adjacent content shifts visually, triggering massive layout shifts.
Dynamic Content Injection: Inserting divs or styling shifts dynamically in the DOM via JavaScript without pre-allocating height blocks pushes existing elements down the page.

Q4Detail the differences in GPU layer allocation: Transforms vs standard positioning.

Standard Properties (top/left): Operating on layout nodes forces the browser to run the complete rendering pipeline (Layout -> Paint -> Composite). This is single-threaded and locks UI.
GPU accelerated properties (transform3d(), will-change): Instructs the browser's layout engine to isolate the target element's pixels onto a separate, hardware-accelerated compositor layer (GPU memory).
Output: The compositor processes animations by simply shifting layer translations and scales inside GPU hardware, bypassing Layout and Paint cycles completely, guaranteeing smooth 60fps animations.

Q5What is CSS Subgrid, and what layout problems does it resolve?

The Problem: In CSS Grid, grid tracks are scoped strictly to the direct parent container. Nested items in child cards cannot align themselves with sibling tracks across columns or rows (e.g., aligning card headers across a row containing variable card descriptions).
The Solution: Adding grid-template-columns: subgrid; or grid-template-rows: subgrid; to a nested grid item binds its child elements to the parent grid track grid-lines, allowing consistent cross-component structural alignments.

45 More Hard Questions Locked