REVIEWED STARTER COLLECTION

CSS Interview Questions

Short answer se start karo, phir interview-level explanation, small CSS example aur common follow-up revise karo. Ye collection canonical CSS tutorial ko duplicate ya replace nahi karta.

1. What is the CSS box model?

Short Answer

Every rendered element is treated like a box made of content, padding, border and margin.

Detailed Explanation

By default, declared width and height apply to the content box. With box-sizing: border-box, padding and border are included inside the declared dimensions, which usually makes layout sizing easier to predict.

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
}
Learn this concept →

2. How do the cascade and specificity decide which CSS rule wins?

Short Answer

The browser considers rule origin and importance, cascade layers when used, selector specificity and then source order when competing declarations target the same property.

Detailed Explanation

Specificity is not simply “the last rule wins.” A more specific selector can beat a later less-specific selector. When competing declarations have equal priority and specificity, the later declaration wins.

.title { color: blue; }
#hero .title { color: red; }
/* red wins because the second selector is more specific */
Learn this concept →

3. When would you use Flexbox instead of Grid?

Short Answer

Flexbox is mainly useful for one-dimensional layout along a row or column. Grid is designed for two-dimensional row-and-column layout.

Detailed Explanation

Use Flexbox when alignment and distribution happen primarily on one axis, such as nav items or toolbar controls. Use Grid when rows and columns need coordinated placement, such as cards, dashboards or page regions.

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
Learn Flexbox →Learn Grid →

4. What is the difference between relative, absolute, fixed and sticky positioning?

Short Answer

relative keeps normal flow and can establish a positioning reference; absolute is removed from normal flow; fixed stays relative to the viewport in common cases; sticky behaves normally until a scroll threshold is reached.

Detailed Explanation

An absolutely positioned element is positioned relative to its containing block, often the nearest positioned ancestor. Sticky positioning also depends on scroll container behavior and requires an inset such as top.

.card { position: relative; }

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

.section-title {
  position: sticky;
  top: 0;
}
Learn this concept →

5. What makes a CSS layout responsive?

Short Answer

A responsive layout adapts to available space using flexible sizing, fluid media, modern layout systems and targeted breakpoints instead of assuming one fixed screen width.

Detailed Explanation

Good responsive CSS often starts with a simple small-screen layout, lets content and containers scale naturally, and adds media queries only where the design genuinely needs a layout change.

img {
  max-width: 100%;
  height: auto;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
Learn this concept →