Navigation

GyaanSetu Educational Platform

Back to Topics

Top 20 CSS Interview Questions for 2026

Master modern CSS concepts from Flexbox and Grid to animations and responsive design

Flexbox & GridAnimationsResponsive DesignCSS Variables
1

What is the CSS Box Model and what are its components?

The CSS Box Model describes how elements are rendered as rectangular boxes. It consists of four parts from inside out: Content (the actual content), Padding (space between content and border), Border (surrounds the padding), and Margin (space outside the border). The box-sizing property can change how width/height are calculated - content-box (default) doesn't include padding/border, while border-box includes them.

CSS
1.box {
2  width: 300px;
3  padding: 20px;
4  border: 5px solid black;
5  margin: 10px;
6  box-sizing: border-box; /* Total width = 300px */
7}
2

Explain the difference between inline, block, and inline-block elements.

Block elements take up the full width available and start on a new line (e.g., div, p, h1). Inline elements only take up as much width as necessary and don't start on a new line (e.g., span, a). Inline-block elements behave like inline elements but allow you to set width and height like block elements.

CSS
1.block { display: block; }      /* Full width, new line */
2.inline { display: inline; }    /* Width of content, same line */
3.inline-block { 
4  display: inline-block;        /* Custom width, same line */
5  width: 200px; 
6  height: 100px; 
7}
3

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

Relative positioning moves an element relative to its normal position. Absolute positioning removes the element from normal flow and positions it relative to its nearest positioned ancestor. Fixed positioning positions the element relative to the viewport and stays in place during scrolling. Sticky positioning is a hybrid - the element behaves as relative until it reaches a scroll threshold, then becomes fixed.

CSS
1.relative { position: relative; top: 10px; left: 20px; }
2.absolute { position: absolute; top: 0; right: 0; }
3.fixed { position: fixed; bottom: 20px; right: 20px; }
4.sticky { position: sticky; top: 0; }
4

How does CSS specificity work and how is it calculated?

Specificity determines which CSS rule applies when multiple rules target the same element. It's calculated as (inline styles, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). For example: inline style = 1000, ID = 100, class = 10, element = 1. Higher specificity wins. !important overrides all but should be used sparingly.

CSS
1/* Specificity: 0,0,1,0 = 10 */
2.button { color: blue; }
3

4/* Specificity: 0,1,0,0 = 100 */
5#header { color: red; }
6

7/* Specificity: 0,1,1,1 = 111 */
8#header .button span { color: green; }
9

10/* Overrides everything */
11.button { color: yellow !important; }
5

What is Flexbox and when would you use it?

Flexbox is a one-dimensional layout method for arranging items in rows or columns. It's ideal for distributing space and aligning items within a container. Use it for navigation bars, card layouts, centering content, equal-height columns, or any layout where you need flexible item sizing and alignment. Key properties include display: flex, justify-content, align-items, and flex-direction.

CSS
1.container {
2  display: flex;
3  justify-content: space-between; /* Main axis alignment */
4  align-items: center;            /* Cross axis alignment */
5  flex-direction: row;            /* or column */
6  gap: 20px;
7}
8

9.item {
10  flex: 1;        /* Grow to fill space */
11  flex-shrink: 0; /* Don't shrink */
12}
6

Explain the CSS Grid layout system and its advantages.

CSS Grid is a two-dimensional layout system for creating complex layouts with rows and columns. Advantages include: precise control over both dimensions, easier responsive design, no need for floats or positioning hacks, ability to overlap elements, and cleaner HTML structure. Use display: grid, grid-template-columns, grid-template-rows, and grid-gap to create grids.

CSS
1.grid-container {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
4  grid-template-rows: 200px auto;
5  gap: 20px;
6  grid-template-areas: 
7    "header header header"
8    "sidebar main main"
9    "footer footer footer";
10}
11

12.header { grid-area: header; }
13.sidebar { grid-area: sidebar; }
7

What is the difference between px, em, rem, %, and vh/vw units?

px are absolute pixels. em is relative to the parent element's font size. rem is relative to the root element's font size. % is relative to the parent element's dimension. vh (viewport height) and vw (viewport width) are relative to 1% of the viewport size. rem is often preferred for consistent sizing, while vh/vw are great for full-screen layouts.

CSS
1.px-unit { font-size: 16px; }           /* Absolute */
2.em-unit { font-size: 1.5em; }         /* 1.5x parent font */
3.rem-unit { font-size: 1.5rem; }       /* 1.5x root font */
4.percent-unit { width: 50%; }          /* 50% of parent */
5.viewport-unit { 
6  height: 100vh;  /* Full viewport height */
7  width: 50vw;    /* Half viewport width */
8}
8

How do you center a div horizontally and vertically?

Several methods: (1) Flexbox: display: flex; justify-content: center; align-items: center; on parent. (2) Grid: display: grid; place-items: center; on parent. (3) Position: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);. (4) Margin auto for horizontal only: margin: 0 auto; with a defined width.

CSS
1/* Method 1: Flexbox (Recommended) */
2.parent {
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  height: 100vh;
7}
8

9/* Method 2: Grid */
10.parent {
11  display: grid;
12  place-items: center;
13  height: 100vh;
14}
15

16/* Method 3: Position + Transform */
17.child {
18  position: absolute;
19  top: 50%;
20  left: 50%;
21  transform: translate(-50%, -50%);
22}
9

What are pseudo-classes and pseudo-elements? Give examples.

Pseudo-classes select elements in a specific state (single colon): :hover, :focus, :nth-child(), :first-child, :active. Pseudo-elements create virtual elements (double colon): ::before, ::after, ::first-letter, ::first-line, ::placeholder. Pseudo-classes style existing elements, while pseudo-elements add new content or style specific parts.

CSS
1/* Pseudo-classes */
2a:hover { color: red; }
3input:focus { border-color: blue; }
4li:nth-child(odd) { background: #f0f0f0; }
5button:disabled { opacity: 0.5; }
6

7/* Pseudo-elements */
8p::first-letter { font-size: 2em; }
9.quote::before { content: '"'; }
10.quote::after { content: '"'; }
11input::placeholder { color: gray; }
10

Explain the difference between display: none and visibility: hidden.

display: none completely removes the element from the document flow - it takes up no space and can't be interacted with. visibility: hidden hides the element but it still occupies space in the layout. Other elements won't move to fill the space. Use display: none for toggling content, visibility: hidden when you want to preserve layout.

CSS
1.display-none {
2  display: none;  /* Removed from layout, no space */
3}
4

5.visibility-hidden {
6  visibility: hidden;  /* Hidden but takes up space */
7}
8

9/* Toggle visibility */
10.menu { display: none; }
11.menu.active { display: block; }
11

What are CSS media queries and how are they used for responsive design?

Media queries apply CSS styles based on device characteristics like screen width, height, orientation, or resolution. Syntax: @media (condition) { /* styles */ }. Example: @media (max-width: 768px) { /* mobile styles */ }. They're essential for responsive design, allowing different layouts for mobile, tablet, and desktop. Common breakpoints are 320px, 768px, 1024px, and 1200px.

CSS
1/* Mobile First Approach */
2.container { padding: 10px; }
3

4/* Tablet */
5@media (min-width: 768px) {
6  .container { padding: 20px; }
7}
8

9/* Desktop */
10@media (min-width: 1024px) {
11  .container { 
12    padding: 40px;
13    max-width: 1200px;
14  }
15}
16

17/* Landscape orientation */
18@media (orientation: landscape) {
19  .hero { height: 60vh; }
20}
12

What is the z-index property and how does it work?

z-index controls the stacking order of positioned elements (relative, absolute, fixed, sticky). Higher values appear on top. It only works on positioned elements. Elements create stacking contexts, and z-index only compares elements within the same context. Parent-child relationships also matter - a child can never appear above a parent's sibling regardless of z-index.

CSS
1.modal {
2  position: fixed;
3  z-index: 1000;  /* On top */
4}
5

6.overlay {
7  position: fixed;
8  z-index: 999;   /* Behind modal */
9}
10

11.dropdown {
12  position: absolute;
13  z-index: 100;
14}
13

Explain the difference between margin and padding.

Margin is the space outside an element's border - it creates distance between elements. Padding is the space inside an element's border - it creates distance between content and border. Margins can collapse (adjacent vertical margins merge), padding never collapses. Background colors extend into padding but not margin. Margins can be negative, padding cannot.

CSS
1.box {
2  margin: 20px;      /* Space outside border */
3  padding: 15px;     /* Space inside border */
4  border: 2px solid black;
5}
6

7/* Margin collapse example */
8.box1 { margin-bottom: 20px; }
9.box2 { margin-top: 30px; }
10/* Actual gap = 30px (not 50px) */
11

12/* Negative margin */
13.overlap { margin-top: -10px; }
14

What are CSS preprocessors like SASS and LESS?

CSS preprocessors extend CSS with programming features like variables, nesting, mixins, functions, and imports. SASS/SCSS is most popular, using $ for variables and @mixin for reusable code blocks. LESS uses @ for variables. They compile to standard CSS. Benefits include: better code organization, reusability, maintainability, and reduced repetition. They require a build process to convert to CSS.

CSS
1// SCSS Example
2$primary-color: #3498db;
3$padding: 15px;
4

5@mixin flex-center {
6  display: flex;
7  justify-content: center;
8  align-items: center;
9}
10

11.button {
12  background: $primary-color;
13  padding: $padding;
14  
15  &:hover {
16    background: darken($primary-color, 10%);
17  }
18  
19  &--large {
20    padding: $padding * 2;
21  }
22}
15

How does the CSS cascade work and what is inheritance?

The cascade determines which styles apply when multiple rules target the same element. Order of importance: 1) !important declarations, 2) Inline styles, 3) Specificity, 4) Source order (later rules override earlier). Inheritance means certain properties (like color, font-family) automatically pass from parent to child elements, while others (like margin, padding) don't. Use inherit to force inheritance.

CSS
1/* Cascade example */
2p { color: blue; }           /* Specificity: 1 */
3.text { color: red; }        /* Specificity: 10 - Wins */
4#content p { color: green; } /* Specificity: 101 - Wins */
5

6/* Inheritance */
7body {
8  color: #333;      /* Inherited by children */
9  font-family: Arial;
10}
11

12div {
13  border: none;     /* NOT inherited */
14}
15

16.child {
17  color: inherit;   /* Force inherit parent color */
18}
16

What is the difference between nth-child() and nth-of-type()?

:nth-child(n) selects elements based on their position among all siblings, regardless of type. :nth-of-type(n) selects elements based on their position among siblings of the same type. Example: p:nth-child(2) selects a <p> only if it's the 2nd child overall. p:nth-of-type(2) selects the 2nd <p> element among siblings, ignoring other element types.

CSS
1/* HTML: <div><h1/><p/><p/><span/></div> */
2

3/* nth-child - counts ALL siblings */
4p:nth-child(2) { 
5  color: red;  /* Selects first <p> (2nd child overall) */
6}
7

8p:nth-child(3) { 
9  color: blue; /* Selects second <p> (3rd child overall) */
10}
11

12/* nth-of-type - counts only <p> siblings */
13p:nth-of-type(1) { 
14  color: green; /* Selects first <p> */
15}
16

17p:nth-of-type(2) { 
18  color: purple; /* Selects second <p> */
19}
17

Explain CSS transitions and animations.

Transitions provide smooth changes between property values over time. Syntax: transition: property duration timing-function delay;. Example: transition: all 0.3s ease;. They require a trigger like :hover. Animations are more complex, using @keyframes to define multiple steps. Syntax: @keyframes name { 0% {} 100% {} } then animation: name duration timing-function;. Animations can run automatically and loop.

CSS
1/* Transitions - Simple changes */
2.button {
3  background: blue;
4  transition: background 0.3s ease, transform 0.2s;
5}
6

7.button:hover {
8  background: darkblue;
9  transform: scale(1.1);
10}
11

12/* Animations - Complex sequences */
13@keyframes slideIn {
14  0% {
15    transform: translateX(-100%);
16    opacity: 0;
17  }
18  100% {
19    transform: translateX(0);
20    opacity: 1;
21  }
22}
23

24.modal {
25  animation: slideIn 0.5s ease-out forwards;
26}
18

What are CSS custom properties (CSS variables) and how do you use them?

CSS variables store reusable values. Define with --variable-name: value; (usually in :root for global scope) and use with var(--variable-name). Example: :root { --primary-color: #3498db; } then color: var(--primary-color);. Benefits: easier theme changes, better maintainability, can be updated with JavaScript, support fallback values: var(--color, blue).

CSS
1:root {
2  --primary-color: #3498db;
3  --secondary-color: #2ecc71;
4  --spacing: 16px;
5  --border-radius: 8px;
6}
7

8.button {
9  background: var(--primary-color);
10  padding: var(--spacing);
11  border-radius: var(--border-radius);
12}
13

14/* With fallback */
15.text {
16  color: var(--text-color, #333);
17}
18

19/* JavaScript update */
20// document.documentElement.style
21//   .setProperty('--primary-color', '#e74c3c');
19

What is the BEM methodology in CSS?

BEM (Block Element Modifier) is a naming convention for CSS classes. Block is a standalone component (.button), Element is a part of a block (.button__icon), Modifier is a variation (.button--large). Example: .card, .card__title, .card--featured. Benefits: clear component structure, prevents naming conflicts, improves code readability, makes relationships obvious, easier maintenance.

CSS
1/* Block - Standalone component */
2.card { }
3

4/* Element - Part of block */
5.card__header { }
6.card__title { }
7.card__body { }
8.card__footer { }
9

10/* Modifier - Variation */
11.card--featured { }
12.card--dark { }
13.card__title--large { }
14

15/* Real example */
16.button { }
17.button__icon { }
18.button__text { }
19.button--primary { }
20.button--disabled { }
20

How do you optimize CSS for better performance?

Techniques include: minimize and compress CSS files, remove unused CSS (tools like PurgeCSS), use shorthand properties, avoid expensive selectors (deeply nested, universal), reduce specificity complexity, use CSS sprites for icons, leverage browser caching, load critical CSS inline and defer non-critical CSS, use CSS containment (contain property), avoid @import (use link instead), and consider CSS-in-JS for component-based apps.

CSS
1/* Bad - Expensive selectors */
2* { margin: 0; }
3div > div > div > p { }
4[type="text"] { }
5

6/* Good - Efficient selectors */
7.reset { margin: 0; }
8.article-text { }
9.input-text { }
10

11/* Use shorthand */
12/* Bad */
13margin-top: 10px;
14margin-right: 20px;
15margin-bottom: 10px;
16margin-left: 20px;
17

18/* Good */
19margin: 10px 20px;
20

21/* Critical CSS inline */
22<style>
23  /* Above-the-fold styles */
24  .header { }
25</style>
26<link rel="stylesheet" href="main.css">

Ready for More Interview Prep?

Explore our complete collection of frontend interview questions covering JavaScript, React, HTML, and more.

View All Topics

© 2026 GyaanSetu. Helping developers ace their interviews.