Chapter•300 Minutes

Items per page

Complete CSS Progressive Interview Question Bank

50 progressive CSS interview questions complete with technical explanations, key takeaways, diagrams, code examples, and interactive knowledge check quizzes.

Q1: What are the core components of a CSS rule?

A CSS rule consists of a Selector (targeting the HTML DOM node) and a Declaration Block enclosed in curly braces {}. Inside the block, declarations are written as property: value; pairs separated by semicolons.

Anatomy of a CSS Rule

CSS Rule Structure

/* Selector { Property: Value; } */
h1 {
  color: #2965f1;
  font-size: 2rem;
}

💡 h1 targets heading tags, setting text color to hex #2965f1 and font size to 2rem.

Key Takeaways

Selector identifies the DOM element node.
Declaration block contains property and value pairs.

Knowledge Check

In the declaration font-size: 16px;, what is 'font-size' called?

Q2: What are the four layers of the standard CSS Box Model?

Every rendered HTML element is enclosed in a rectangular box consisting of four concentric layers from inside out: Content, Padding (transparent area inside borders), Border (outer edge surrounding padding), and Margin (transparent clearance separating neighbor elements).

CSS Box Model Structural Layers

Box Layer Properties

.box {
  width: 200px;        /* Content Area */
  padding: 20px;       /* Inner clearance */
  border: 2px solid;   /* Enclosing boundary */
  margin: 15px;        /* Outer clearance */
}

💡 These four properties define the complete spatial geometry of the HTML box element.

Key Takeaways

Layers from inside out: Content → Padding → Border → Margin.
Padding adds space inside the border; Margin creates clearance outside.

Knowledge Check

Which Box Model layer creates clearance inside an element's border?

Q3: What is the difference between content-box and border-box sizing?

In content-box (browser default), declared width and height apply strictly to content. Padding and border add onto the width, expanding total rendered size (width + padding + border). In border-box, padding and border are included inside the defined width.

Global border-box Reset

*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* Total width remains exactly 300px with border-box */
}

💡 border-box prevents elements from breaking layouts when padding or borders are added.

Key Takeaways

content-box expands total element dimensions when padding or border is added.
border-box locks overall dimensions, fitting padding and border inside width.

Knowledge Check

What is the total computed pixel width of an element with width: 100px, padding: 10px, border: 2px, and box-sizing: content-box?

Q4: How do display: block, inline, and inline-block differ?

block: Starts on a new line, expands to fill 100% container width, and respects width/height.
inline: Flows within text, occupies required content width, and ignores top/bottom margins and width/height.
inline-block: Flows inline like text, but honors explicit width, height, padding, and margins.

Inline-Block Display Mode

.badge {
  display: inline-block;
  width: 80px;
  height: 24px;
  padding: 4px;
}

💡 inline-block keeps items inline with surrounding text while respecting explicit width and height.

Key Takeaways

inline elements ignore vertical margins and explicit width/height dimensions.
inline-block flows side-by-side while preserving explicit dimension control.

Knowledge Check

Which display value allows setting explicit width and height while flowing elements inline on the same line?

Q5: How is CSS Specificity calculated?

Specificity is calculated as a 3-column vector score: IDs (1,0,0), Classes / Attributes / Pseudo-classes (0,1,0), and Elements / Pseudo-elements (0,0,1). Inline styles carry (1,0,0,0) weight. !important bypasses standard specificity weight comparisons entirely.

Specificity Weight Calculation

/* Score: (0,0,1) */
p { color: black; }

/* Score: (0,1,1) */
p.highlight { color: blue; }

/* Score: (1,0,0) - Wins over class selectors */
#main-content { color: red; }

💡 #main-content wins because its ID score (1,0,0) outweighs class and tag scores.

Key Takeaways

Specificity hierarchy: Inline Styles > IDs > Classes/Attributes/Pseudo-classes > Elements.
Equal specificity rules resolve by giving precedence to whichever rule appears last in stylesheet order.

Knowledge Check

Which selector carries the highest calculated specificity score?

Q6: What is Margin Collapse and when does it occur?

Margin collapse happens when top and bottom margins of adjacent block elements combine into a single merged margin whose size equals the largest individual margin. It occurs between adjacent vertical siblings, parent and first/last child, or empty blocks.

Vertical Siblings Margin Collapse

.box1 {
  margin-bottom: 30px;
}
.box2 {
  margin-top: 20px;
}
/* Rendered clearance between box1 and box2 is 30px (not 50px) */

💡 Vertical sibling margins collapse, adopting the larger 30px value instead of summing them.

Key Takeaways

Only vertical (top/bottom) margins collapse; horizontal margins never collapse.
Creating a new Block Formatting Context (BFC) prevents parent-child margin collapse.

Knowledge Check

What is the final vertical margin gap between two siblings where item 1 has margin-bottom: 40px and item 2 has margin-top: 25px?

Q7: What is the difference between rem, em, vh, and vw units?

rem (Root EM): Relative to font-size of the root <html> element (default 16px).
em: Relative to font-size of the parent or local element (compounds on nested elements).
vh / vw: Percentage of viewport height / width (1vh = 1% viewport height).

rem vs em Comparison

html {
  font-size: 16px;
}
.card {
  font-size: 1.25rem; /* 20px */
  padding: 1em;       /* 20px (relative to card's own font-size) */
}

💡 rem references the root html font-size, while em calculates based on local font-size.

Key Takeaways

rem ensures consistent scaling relative to root html font configuration.
em scales relative to immediate parent font size and compounds when nested.

Knowledge Check

If root html has font-size: 16px, what is the calculated value of 2.5rem?

Q8: How do static, relative, absolute, fixed, and sticky positioning modes work?

static: Default document flow.
relative: Shifted relative to normal flow position without affecting neighboring layout.
absolute: Positioned relative to nearest non-static positioned ancestor.
fixed: Positioned relative to the viewport window.
sticky: Switches between relative and fixed based on user scroll position thresholds.

Sticky Navigation Header

.header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1000;
}

💡 Sticky switches from relative flow to fixed positioning when scrolling hits top: 0 boundary.

Key Takeaways

absolute aligns relative to nearest non-static positioned ancestor.
sticky anchors elements relative to scroll container bounds.

Knowledge Check

Against what reference frame does an element with position: absolute position itself?

Q9: How do Flexbox axes operate and what are primary flex container properties?

Flexbox manages 1-dimensional layouts along two axes: Main Axis (defined by flex-direction: row or column) and Cross Axis (perpendicular to main axis). Container rules include display: flex, flex-direction, and flex-wrap.

Flexbox Main Axis vs Cross Axis Configuration

Flex Container Setup

.flex-parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

💡 Establishes a horizontal main axis with multi-line item wrapping enabled.

Key Takeaways

flex-direction dictates whether main axis runs horizontally or vertically.
flex-wrap: wrap allows flex items to flow onto additional lines.

Knowledge Check

If flex-direction is set to column, which orientation does the Cross Axis adopt?

Q10: What is the difference between justify-content, align-items, and align-content?

justify-content: Aligns flex items along the main axis.
align-items: Aligns flex items along the cross axis within a single line.
align-content: Distributes multi-line flex tracks along the cross axis when flex-wrap: wrap is enabled.

Centering with Flexbox Alignment

.center-box {
  display: flex;
  justify-content: center; /* Main axis center */
  align-items: center;     /* Cross axis center */
  height: 100vh;
}

💡 Combines justify-content and align-items to center content vertically and horizontally.

Key Takeaways

justify-content manages main-axis distribution.
align-items aligns individual items inside flex lines on cross axis.
align-content targets track spacing across wrapped multi-line containers.

Knowledge Check

Which Flexbox property distributes wrapped track rows along the cross axis?

Q1: What are the core components of a CSS rule?

Q2: What are the four layers of the standard CSS Box Model?

Q3: What is the difference between content-box and border-box sizing?

Q4: How do display: block, inline, and inline-block differ?

Q5: How is CSS Specificity calculated?

Q6: What is Margin Collapse and when does it occur?

Q7: What is the difference between rem, em, vh, and vw units?

Q8: How do static, relative, absolute, fixed, and sticky positioning modes work?

Q9: How do Flexbox axes operate and what are primary flex container properties?

Q10: What is the difference between justify-content, align-items, and align-content?

STAY UPDATED WITH BYTES!