CSS Interview Questions

What is the difference between CSS Grid and Flexbox?Intermediate

Flexbox is primarily designed for one-dimensional layouts (rows or columns), while CSS Grid is a two-dimensional layout system that allows complex grid-based designs.

Code Example:

/* Flexbox (One-dimensional) */
.flex-container {
  display: flex;
  justify-content: space-between;
}

/* CSS Grid (Two-dimensional) */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

Explain the CSS specificity hierarchyIntermediate

Specificity determines which CSS rules are applied to an element. It is calculated based on inline styles, IDs, classes, and element selectors.

Code Example:

/* Specificity Increasing Order */
div {}               /* 0,0,0,1 */
.class {}            /* 0,0,1,0 */
#id {}               /* 0,1,0,0 */
style=""             /* 1,0,0,0 */
!important          /* Highest priority */

What are CSS Custom Properties (Variables)?Intermediate

CSS Custom Properties allow you to store specific values to be reused throughout a document, enabling dynamic styling and easier maintenance.

Code Example:

:root {
  --primary-color: #3498db;
  --padding-standard: 15px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--padding-standard);
}

Explain the difference between em, rem, and px unitsBasic

px is an absolute unit, em is relative to parent element's font size, and rem is relative to the root element's font size.

Code Example:

body {
  font-size: 16px;  /* Root font size */
}

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em;    /* 30px (1.5 * parent size) */
  width: 10rem;        /* 160px (10 * root font size) */
  padding: 20px;       /* Fixed pixel value */
}

What is CSS Flexbox and how does it work?Intermediate

Flexbox is a layout model that allows flexible arrangement of elements within a container, providing powerful alignment and distribution capabilities.

Code Example:

.flex-container {
  display: flex;
  justify-content: center;        /* Horizontal alignment */
  align-items: center;            /* Vertical alignment */
  flex-direction: row;            /* Default direction */
  flex-wrap: wrap;                /* Allow wrapping */
}

Explain CSS Box ModelBasic

The CSS Box Model describes the layout of elements with content, padding, border, and margin, determining how space is calculated.

Code Example:

.box {
  width: 300px;
  padding: 20px;
  border: 10px solid black;
  margin: 25px;
  box-sizing: border-box; /* Include padding and border in total width */
}

What is CSS Positioning?Intermediate

CSS Positioning allows precise control over element placement, with different modes like static, relative, absolute, fixed, and sticky.

Code Example:

.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
}

.absolute-box {
  position: absolute;
  bottom: 0;
  right: 0;
}

What are CSS Pseudo-classes and Pseudo-elements?Intermediate

Pseudo-classes select elements based on a state, while pseudo-elements style a specific part of an element.

Code Example:

/* Pseudo-class */
a:hover {
  color: red;
}

/* Pseudo-element */
p::first-letter {
  font-size: 2em;
  color: blue;
}

Explain CSS Cascade and InheritanceAdvanced

The cascade determines which styles are applied to an element, with specificity, importance, and order of declaration playing key roles.

Code Example:

/* More specific rule overrides less specific */
div { color: blue; }
.special { color: red; }  /* Takes precedence */

/* Inheritance */
.parent {
  color: green;
}
.child {  /* Inherits parent's color */
  font-size: larger;
}

What is CSS Flexbox Alignment?Intermediate

Flexbox provides powerful alignment properties for distributing and aligning content both horizontally and vertically.

Code Example:

.flex-container {
  display: flex;
  justify-content: space-between;  /* Horizontal spacing */
  align-items: center;             /* Vertical centering */
  align-content: space-around;     /* Multi-line alignment */
}

Explain CSS Media QueriesIntermediate

Media queries allow responsive design by applying different styles based on device characteristics like width, height, and orientation.

Code Example:

@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
    width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: white;
  }
}

What is CSS Transform?Intermediate

CSS Transform allows 2D and 3D transformation of elements, including scaling, rotating, skewing, and translating.

Code Example:

.element {
  transform: 
    rotate(45deg) 
    scale(1.5) 
    skew(10deg) 
    translate(50px, 100px);
}

Explain CSS TransitionsIntermediate

Transitions provide a way to control animation speed when changing CSS properties, creating smooth state changes.

Code Example:

.button {
  background-color: blue;
  transition: 
    background-color 0.3s ease,
    transform 0.2s linear;
}

.button:hover {
  background-color: red;
  transform: scale(1.1);
}

What are CSS Animations?Advanced

CSS Animations allow more complex, keyframe-based animations directly in CSS without using JavaScript.

Code Example:

@keyframes slide-in {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

.element {
  animation: 
    slide-in 1s ease-in-out,
    fade-in 0.5s;
}

Explain CSS Calc() FunctionIntermediate

The calc() function allows performing calculations to determine CSS property values, mixing different units.

Code Example:

.container {
  width: calc(100% - 80px);
  margin: calc(10px + 2vw);
  font-size: calc(16px + 0.5vw);
}

What are CSS Counters and how do they work?Advanced

CSS Counters are variables maintained by CSS to track how many times they are used, typically for creating automatic numbering or complex nested numbering systems.

Code Example:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Explain CSS Grid Auto-placement AlgorithmAdvanced

The Grid Auto-placement Algorithm determines how grid items are automatically placed in a grid container when their position is not explicitly defined.

Code Example:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
}

What is the CSS containment property?Advanced

The contain property allows developers to isolate elements from the rest of the document, optimizing rendering performance by telling the browser which parts of the page can affect other parts.

Code Example:

.component {
  contain: content;
  contain: strict;
  contain: layout paint;
}

How does CSS Scroll Snap work?Intermediate

CSS Scroll Snap provides a way to create smooth, controlled scroll experiences by defining snap points as elements are scrolled.

Code Example:

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}
.child {
  scroll-snap-align: start;
  width: 100vw;
}

What are CSS Custom Selectors?Advanced

CSS Custom Selectors (@custom-selector) allow creating reusable selectors that can be referenced throughout your stylesheets.

Code Example:

@custom-selector :--heading h1, h2, h3, h4, h5, h6;
@custom-selector :--enter :focus, :hover;

:--heading {
  font-family: sans-serif;
}
.button:--enter {
  background: blue;
}

Explain CSS Shapes and how they affect text wrappingAdvanced

CSS Shapes allows content to flow around custom shapes, circles, and polygons instead of just rectangular boxes.

Code Example:

.element {
  float: left;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  width: 200px;
  height: 200px;
}

What is the CSS :is() pseudo-class?Intermediate

The :is() pseudo-class takes a selector list as its argument and selects any element that matches any of the selectors in that list.

Code Example:

:is(header, main, footer) p {
  margin-bottom: 20px;
}

/* Equivalent to */
header p, main p, footer p {
  margin-bottom: 20px;
}

How does CSS perspective property work?Advanced

The perspective property determines the distance between the z=0 plane and the user, affecting how 3D transformed elements appear.

Code Example:

.container {
  perspective: 1000px;
}
.card {
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

What are CSS Feature Queries?Intermediate

Feature queries (@supports) allow styles to be applied based on browser support for specific CSS features.

Code Example:

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

Explain CSS Custom ScrollbarsIntermediate

CSS allows customizing scrollbar appearance using pseudo-elements and specific scrollbar properties.

Code Example:

.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}
.custom-scroll::-webkit-scrollbar {
  width: 10px;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;
}

What is the CSS content-visibility property?Advanced

content-visibility allows browsers to skip rendering of off-screen content, improving initial page load performance.

Code Example:

.long-content {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

How do CSS Logical Properties work?Intermediate

Logical Properties provide a way to control layout through logical, rather than physical, directional and dimensional styles.

Code Example:

.element {
  margin-block-start: 1em;
  padding-inline-end: 2em;
  border-block: 1px solid;
  inline-size: 200px;
}

What is CSS Container Queries?Advanced

Container Queries allow styles to be applied based on the size of a containing element rather than the viewport.

Code Example:

.container {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Explain CSS SubgridAdvanced

Subgrid allows nested grid elements to participate in the parent grid's row/column sizing, enabling complex layouts.

Code Example:

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.nested-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

What are CSS Custom Highlights?Advanced

Custom Highlights API allows creating and styling custom text highlights programmatically.

Code Example:

::highlight(custom-highlight) {
  background-color: yellow;
  color: black;
}

// JavaScript
CSS.highlights.set('custom-highlight', 
  new Highlight(range1, range2));

How does CSS isolation property work?Intermediate

The isolation property creates a new stacking context, affecting how elements are composited and how they interact with blend modes.

Code Example:

.overlay {
  isolation: isolate;
  mix-blend-mode: multiply;
}

What is the CSS :where() pseudo-class?Intermediate

The :where() pseudo-class functions similarly to :is(), but always has 0 specificity, making it easier to override.

Code Example:

:where(header, main, footer) a {
  color: blue;
}

/* Easy to override due to 0 specificity */
a {
  color: red;
}

Explain CSS Masking techniquesAdvanced

CSS Masking allows partial or complete hiding of elements using masks defined by images, gradients, or shapes.

Code Example:

.masked-element {
  -webkit-mask-image: linear-gradient(to right, transparent, black);
  mask-image: linear-gradient(to right, transparent, black);
  -webkit-mask-size: cover;
  mask-size: cover;
}

What are CSS Grid Named Areas?Intermediate

Grid Named Areas allow creating template layouts using named grid areas, making it easier to create and maintain complex layouts.

Code Example:

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
.header { grid-area: header; }

How does CSS @layer work?Advanced

The @layer rule declares a cascade layer, helping to manage specificity conflicts in large stylesheets by explicitly defining the order of precedence.

Code Example:

@layer framework, custom;

@layer framework {
  .button { color: blue; }
}
@layer custom {
  .button { color: red; }
}

What is the CSS aspect-ratio property?Intermediate

The aspect-ratio property sets a preferred aspect ratio for elements, maintaining proportional dimensions during resizing.

Code Example:

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.square {
  aspect-ratio: 1;
  width: 200px;
}

Explain CSS Scroll TimelineAdvanced

Scroll Timeline allows creating animations that progress based on scroll position rather than time.

Code Example:

@scroll-timeline scroll-animation {
  source: selector("#container");
  orientation: vertical;
  scroll-offsets: 0px, 100px;
}
.animated {
  animation: fade 1s linear;
  animation-timeline: scroll-animation;
}

What is the CSS :has() selector?Advanced

The :has() selector allows selecting elements based on their descendants or subsequent elements, enabling "parent" selection.

Code Example:

/* Style paragraphs that contain images */
p:has(img) {
  display: flex;
  align-items: center;
}
/* Style articles with no headings */
article:not(:has(h1, h2, h3)) {
  padding: 20px;
}

How does CSS overscroll-behavior work?Intermediate

overscroll-behavior controls what happens when a scroll boundary is reached, useful for preventing scroll chaining in nested scrollable areas.

Code Example:

.modal {
  height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body {
  overscroll-behavior: none; /* Prevent bounce */
}

What are CSS Custom State Pseudo-Classes?Advanced

Custom state pseudo-classes allow defining and styling custom states for elements, similar to built-in states like :hover or :focus.

Code Example:

/* Define custom state */
@custom-selector :--loading .loading;

:--loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Usage with multiple states */
.button:--loading:hover {
  cursor: wait;
}

Explain CSS Paint APIAdvanced

The CSS Paint API allows developers to programmatically generate images that can be used with properties like background-image or border-image.

Code Example:

CSS.paintWorklet.addModule('myPaint.js');

.element {
  background-image: paint(myGradient);
  --gradient-start: blue;
  --gradient-end: green;
}

What is the CSS font-display property?Intermediate

font-display determines how a font face is displayed during loading and after loading failures, affecting web font loading behavior.

Code Example:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

How does CSS backdrop-filter work?Intermediate

backdrop-filter applies filters to the area behind an element, creating effects like blur or color shifting on the background.

Code Example:

.modal-overlay {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}
.frost-glass {
  backdrop-filter: blur(8px) brightness(120%);
}

What is CSS @property?Advanced

The @property rule allows defining custom properties with type checking, default values, and inheritance behavior.

Code Example:

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.gradient {
  background: linear-gradient(var(--gradient-angle), blue, red);
}

Explain CSS Motion PathAdvanced

Motion Path allows animating elements along a specified path, creating complex movement patterns.

Code Example:

.moving-element {
  offset-path: path('M 0 0 C 100 0, 200 100, 300 100');
  offset-distance: 0%;
  animation: move 3s linear infinite;
}
@keyframes move {
  100% { offset-distance: 100%; }
}