Beginner CSS3 Interview Questions

CSS (Cascading Style Sheets) is a stylesheet language used to control the visual presentation of HTML elements including layout, colors, fonts, and spacing.

p {
  color: navy;
  font-size: 16px;
}

CSS3 is the latest version of CSS, introducing modules like Flexbox, Grid, animations, transitions, custom properties, and media queries for modern web design.

CSS can be applied inline (style attribute), internally (style tag in head), or externally (linked .css file). External stylesheets are the recommended approach.

/* Inline */
<p style="color: red;">

/* Internal */
<style> p { color: red; } </style>

/* External */
<link rel="stylesheet" href="styles.css">

The box model describes the rectangular box wrapping every element, consisting of content, padding, border, and margin from inside to outside.

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px;
}

Padding is the space between the content and the border inside an element; margin is the space outside the border between the element and others.

.card {
  padding: 20px; /* inner space */
  margin: 10px;  /* outer space */
}

Specificity determines which CSS rule is applied when multiple rules target the same element. It is calculated as inline styles > IDs > classes > elements.

#header { color: blue; }    /* specificity: 0,1,0,0 */
.title  { color: green; }   /* specificity: 0,0,1,0 */
h1      { color: red; }     /* specificity: 0,0,0,1 */

An ID selector (#id) targets a unique element on the page and has higher specificity; a class selector (.class) can be reused on multiple elements.

#hero { background: black; }
.card { background: white; }

The display property controls how an element is rendered in the layout, with common values being block, inline, inline-block, flex, grid, and none.

.hidden  { display: none; }
.inline  { display: inline; }
.block   { display: block; }
.flex    { display: flex; }

display: none removes the element from the layout entirely; visibility: hidden hides it visually but it still occupies its original space.

.gone   { display: none; }       /* no space */
.hidden { visibility: hidden; }  /* space preserved */

The position property controls element placement with values: static (default), relative, absolute, fixed, and sticky.

.sticky-nav {
  position: sticky;
  top: 0;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
}

Relative positions an element relative to its normal position; absolute removes it from the flow and positions it relative to the nearest positioned ancestor.

.parent { position: relative; }
.child  {
  position: absolute;
  top: 10px;
  right: 10px;
}

z-index controls the stacking order of positioned elements. Higher values appear on top of lower ones along the z-axis.

.modal   { z-index: 1000; }
.overlay { z-index: 999; }
.content { z-index: 1; }

Float places an element to the left or right of its container, allowing text and inline elements to wrap around it.

img {
  float: left;
  margin-right: 16px;
}

The color property sets the text color using named colors, HEX, RGB, RGBA, HSL, or HSLA values.

h1 { color: #333333; }
p  { color: rgba(0, 0, 0, 0.7); }
a  { color: hsl(210, 100%, 50%); }

px is absolute; em is relative to the parent element font size; rem is relative to the root font size; % is relative to the parent element's size.

:root { font-size: 16px; }
.box {
  font-size: 1rem;   /* 16px */
  padding: 1em;      /* relative to parent */
  width: 50%;        /* half of parent */
}

box-sizing controls whether padding and border are included in an element's total width and height. border-box is the modern preferred setting.

* {
  box-sizing: border-box;
}

The overflow property controls what happens when content exceeds its container, with values: visible, hidden, scroll, and auto.

.container {
  height: 200px;
  overflow: auto;
}

The cursor property sets the mouse cursor style when hovering over an element, such as pointer, default, crosshair, or not-allowed.

button { cursor: pointer; }
.disabled { cursor: not-allowed; }

The opacity property sets the transparency level of an element from 0 (fully transparent) to 1 (fully opaque), affecting the element and all its children.

.ghost {
  opacity: 0.5;
}

The border property is a shorthand for setting border-width, border-style, and border-color on all four sides of an element.

.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

Flexbox is a one-dimensional layout model that distributes space and aligns items within a container along a row or column axis.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

CSS Grid is a two-dimensional layout system that arranges content into rows and columns simultaneously, ideal for complex page layouts.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

Flexbox handles layout in one dimension (row or column); Grid handles layout in two dimensions (rows and columns) simultaneously.

/* Flexbox: one direction */
.nav { display: flex; gap: 8px; }

/* Grid: two directions */
.page { display: grid; grid-template-columns: 1fr 3fr; }

Media queries apply CSS rules conditionally based on screen size, resolution, or device characteristics for responsive design.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

CSS custom properties store reusable values defined with -- prefix and accessed via var(), making theming and maintenance easier.

:root {
  --primary: #6200ea;
  --spacing: 16px;
}
.button {
  background: var(--primary);
  padding: var(--spacing);
}

Pseudo-classes select elements based on their state or position, such as :hover, :focus, :nth-child, :first-child, and :not.

a:hover { color: blue; }
input:focus { border-color: #6200ea; }
li:nth-child(odd) { background: #f5f5f5; }

Pseudo-elements style specific parts of an element using :: syntax, such as ::before, ::after, ::first-line, and ::placeholder.

.card::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--primary);
}

CSS transitions smoothly animate property changes over a specified duration when triggered by state changes like hover or focus.

.button {
  background: #6200ea;
  transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
  background: #3700b3;
  transform: translateY(-2px);
}

CSS animations use @keyframes to define animation steps and the animation property to control duration, timing, and iteration on elements.

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero {
  animation: fadeIn 0.5s ease forwards;
}

The transform property applies 2D or 3D transformations like translate, rotate, scale, and skew to elements without affecting document flow.

.card:hover {
  transform: scale(1.05) translateY(-4px);
}

Transitions require a trigger (like hover) and animate between two states; animations use @keyframes for complex multi-step sequences that can run automatically.

The calc() function performs mathematical calculations mixing different units directly in CSS property values.

.sidebar {
  width: calc(100% - 320px);
  height: calc(100vh - 64px);
}

object-fit controls how a replaced element like img or video fits its container, with values: fill, contain, cover, none, and scale-down.

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

backdrop-filter applies graphical effects like blur or brightness to the area behind an element, commonly used for glassmorphism effects.

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

clip-path defines a clipping region that determines which part of an element is visible, supporting shapes like circle, ellipse, and polygon.

.avatar {
  clip-path: circle(50%);
}
.banner {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

BEM (Block Element Modifier) is a CSS naming convention that structures class names as block__element--modifier for better readability and maintainability.

.card { }                  /* Block */
.card__title { }           /* Element */
.card__title--large { }    /* Modifier */

The filter property applies visual effects like blur, brightness, contrast, grayscale, and drop-shadow to elements.

img:hover {
  filter: brightness(1.1) saturate(1.2);
}
.dimmed {
  filter: grayscale(100%);
}

Specificity is calculated as: inline styles (1000) > IDs (100) > classes, attributes, pseudo-classes (10) > elements, pseudo-elements (1).

/* Specificity: 0,0,0,1 */
p { color: black; }
/* Specificity: 0,0,1,0 */
.text { color: gray; }
/* Specificity: 0,1,0,0 */
#intro { color: navy; }

will-change hints to the browser about which properties will change, allowing it to optimize rendering in advance for smoother animations.

.animated {
  will-change: transform, opacity;
}

Combinators define relationships between selectors: descendant (space), child (>), adjacent sibling (+), and general sibling (~).

div p      { }   /* descendant */
div > p    { }   /* direct child */
h2 + p     { }   /* adjacent sibling */
h2 ~ p     { }   /* general sibling */

The cascade is the algorithm CSS uses to resolve conflicting rules by evaluating origin, importance, specificity, and source order.

CSS containment (contain property) isolates a subtree from the rest of the document for layout, style, paint, or size, improving rendering performance.

.widget {
  contain: layout paint;
}

Logical properties use flow-relative terms (inline, block, start, end) instead of physical directions, supporting internationalization and RTL layouts.

.text {
  margin-inline-start: 16px;
  padding-block: 8px;
}

Subgrid allows a nested grid to inherit and align to the parent grid's tracks, enabling consistent alignment across nested components.

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

Container queries allow styling an element based on its parent container's size rather than the viewport size, enabling truly component-level responsiveness.

.card-wrapper {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

The :has() relational pseudo-class selects a parent element based on whether it contains a specific child, acting as a "parent selector".

/* Style form group if input is invalid */
.form-group:has(input:invalid) {
  border-color: red;
}

The @layer rule defines cascade layers to explicitly control the order of specificity, making large-scale CSS architecture more manageable.

@layer base, components, utilities;

@layer base {
  p { font-size: 1rem; }
}
@layer utilities {
  .mt-4 { margin-top: 16px; }
}

A stacking context is a three-dimensional conceptual space in which elements are stacked along the z-axis, created by properties like position + z-index, opacity, or transform.

.context {
  position: relative;
  z-index: 1;
  /* creates new stacking context */
  transform: translateZ(0);
}

The aspect-ratio property maintains a consistent width-to-height ratio for an element regardless of the available space.

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.avatar {
  width: 48px;
  aspect-ratio: 1;
}

Scroll snap creates controlled scrolling experiences where the scroll position snaps to defined points within a container.

.slider {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
.slide {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

The CSS Paint API (part of Houdini) allows writing JavaScript worklets that programmatically draw custom backgrounds and borders directly in CSS.

rem scales relative to the root font size making it predictable globally; em compounds based on parent font size making it useful for component-level scaling.

:root { font-size: clamp(14px, 2vw, 18px); }
h1 { font-size: 2.5rem; }
.badge { font-size: 0.75em; padding: 0.25em 0.5em; }

clamp() sets a value that scales fluidly between a minimum and maximum, ideal for responsive typography and spacing without media queries.

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}
.section {
  padding: clamp(16px, 5vw, 80px);
}

CSS performance is improved by minimizing reflows, using transform and opacity for animations, avoiding deep selectors, leveraging contain, and using will-change sparingly.

/* Prefer transform over top/left */
.animate {
  transition: transform 0.3s ease;
}
.animate:hover {
  transform: translateY(-4px); /* GPU composited */
}

content-visibility skips rendering of off-screen content until it is needed, dramatically improving initial page load performance for long pages.

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

Some CSS properties like color, font-family, and line-height are inherited from parent to child automatically; others like margin and padding are not.

body {
  font-family: 'Inter', sans-serif; /* inherited by all children */
  color: #333;
}

initial resets a property to its default browser value; inherit forces a property to inherit from its parent; unset resets to inherited value if inheritable, otherwise to initial.

.reset {
  color: unset;
  margin: initial;
  font-size: inherit;
}

CSS preprocessors like SCSS, SASS, and LESS extend CSS with variables, nesting, mixins, and functions that compile down to standard CSS.

$primary: #6200ea;

.button {
  background: $primary;
  &:hover {
    background: darken($primary, 10%);
  }
}

@supports applies CSS rules conditionally based on whether the browser supports a specific CSS feature, enabling progressive enhancement.

@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Dark mode is implemented using the prefers-color-scheme media query to detect the user's system preference and apply alternate color schemes.

:root {
  --bg: #ffffff;
  --text: #111111;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --text: #ffffff;
  }
}