CSS interview questions

CSS stands for Cascading Style Sheets. It controls the presentation and layout of structured documents. Styles can be written in a style attribute, inside a <style> element, or in an external stylesheet. External stylesheets are usually preferred for reuse and maintenance.

<link rel="stylesheet" href="styles.css">

/* styles.css */
p {
  color: navy;
}

The cascade chooses one value when several declarations target the same property. It considers origin and importance, cascade layers, specificity, scope proximity, and source order. Inheritance lets some computed values, such as color and font-family, pass from a parent to its children. Not every property inherits.

body {
  color: #333;
}

p {
  color: navy;
}

Specificity compares selectors only after higher cascade rules such as origin, importance, and layer order are resolved. IDs have more weight than classes, attributes, and pseudo-classes, which have more weight than type selectors and pseudo-elements. :where() always adds zero specificity. If specificity ties, the later declaration wins.

.card p { color: navy; }
#summary { color: maroon; }
:where(.panel) p { margin: 0; }

Avoid increasing specificity to fix every conflict. Prefer clear source order, small selectors, and cascade layers where useful.

CSS lays out an element as a content box surrounded by padding, a border, and margin. Padding adds space inside the border. Margin adds space outside it. Understanding these areas is necessary when calculating size, spacing, and overflow.

.card {
  width: 240px;
  padding: 16px;
  border: 1px solid #aaa;
  margin: 24px;
}

With the default content-box value, a declared width applies only to the content box, so padding and borders increase the rendered size. With border-box, the declared width includes the content, padding, and border. Margin is always outside that width.

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

Padding creates space between content and its border, and the element's background extends through it. Margin creates transparent space outside the border. Vertical margins between block boxes can collapse in some normal-flow layouts, while padding never collapses.

.card {
  padding: 16px;
  margin-block: 24px;
}

A block box normally starts on a new line and fills the available inline size. An inline box flows with text, and normal width and height declarations do not size it in the same way. inline-block flows inline while accepting width and height like a block container.

.tag {
  display: inline-block;
  padding: 4px 8px;
}

display: none removes the element's box from layout. visibility: hidden keeps its layout space but hides it and prevents interaction. opacity: 0 makes the element transparent while it still takes space and can remain interactive and exposed to assistive technology unless handled separately.

.removed { display: none; }
.hidden { visibility: hidden; }
.transparent { opacity: 0; }

static uses normal layout. relative keeps its original space but can be visually offset. absolute leaves normal flow and uses a containing block. fixed usually attaches to the viewport. sticky behaves like relative until a scroll boundary and inset cause it to stay in view within its scroll container.

.toolbar {
  position: sticky;
  top: 0;
}

An absolutely positioned element is placed relative to its containing block. This is commonly established by the nearest ancestor whose position is not static, although transforms and some other properties can also establish one. If no ancestor qualifies, the initial containing block is used.

.card { position: relative; }
.badge {
  position: absolute;
  inset: 8px 8px auto auto;
}

z-index orders boxes inside a stacking context. A child cannot escape its parent's stacking context, so a very large value can still appear behind an element in another context. Positioning with z-index, opacity below 1, transforms, and several other properties can create stacking contexts.

.modal-layer {
  position: fixed;
  z-index: 20;
}

px is a CSS pixel and is an absolute length unit. rem is based on the root element's font size. em usually uses the current element's font size, but on font-size it uses the inherited font size. A percentage is relative to a reference defined by the property, often a containing block rather than simply the parent.

:root { font-size: 16px; }
.card {
  padding: 1rem;
  width: 75%;
}

The min properties set lower bounds and the max properties set upper bounds on the used size. They are useful for flexible layouts because an element can grow or shrink within limits instead of being locked to one fixed size.

.content {
  width: 100%;
  max-width: 70rem;
  min-height: 20rem;
}

These functions calculate responsive numeric values. calc() combines arithmetic and compatible units. min() chooses the smallest result, max() chooses the largest, and clamp() keeps a preferred value between a minimum and maximum.

.page { width: calc(100% - 2rem); }
h1 { font-size: clamp(2rem, 5vw, 4rem); }

Custom properties have names beginning with two hyphens and are read with var(). They participate in the cascade and inherit by default, which makes them useful for design tokens and local overrides. var() can provide a fallback when the requested custom property is not defined.

:root { --brand-color: #315c8c; }
.button { color: var(--brand-color, navy); }

overflow controls how content outside a box is displayed. visible allows it to paint outside, hidden clips it, auto adds scrolling when needed, and scroll always creates a scrolling mechanism. clip also clips overflow but does not create a scroll container.

.panel {
  max-height: 20rem;
  overflow: auto;
}

A pseudo-class selects an existing element in a state or relationship, such as :hover, :focus-visible, or :nth-child(). A pseudo-element targets a generated or conceptual part of an element, such as ::before, ::after, or ::first-line.

button:focus-visible { outline: 2px solid currentColor; }
.note::before { content: "Note: "; }

:nth-child() checks an element's position among all siblings. :nth-of-type() checks its position among siblings with the same element type. The selector before the pseudo-class must still match the element.

li:nth-child(2) { font-weight: 600; }
p:nth-of-type(2) { color: #555; }

Combinators describe relationships between selectors. A space selects descendants, > selects direct children, + selects the next sibling, and ~ selects later siblings that share the same parent.

.card p { color: #333; }
.card > h2 { margin-top: 0; }
h2 + p { margin-top: 0; }
h2 ~ p { line-height: 1.6; }

flex-direction defines the main axis, so it may be horizontal or vertical. justify-content distributes items along the main axis. align-items aligns items along the cross axis. This is why those properties should not be described only as horizontal and vertical alignment.

.toolbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

flex-basis supplies an item's starting size on the main axis. flex-grow controls how positive free space is shared, and flex-shrink controls how items shrink when space is insufficient. The flex shorthand is usually safer because it resets all three values together.

.main { flex: 1 1 30rem; }
.sidebar { flex: 0 1 18rem; }

Use Grid when rows and columns should be controlled together or items need explicit two-dimensional placement. Use Flexbox when layout mainly follows one axis and content distribution drives the result. They can be combined in the same page.

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

repeat(), auto-fit or auto-fill, and minmax() can let the browser create as many columns as fit. auto-fit collapses empty tracks, while auto-fill keeps the track slots. Each item can keep a useful minimum and share remaining space.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

These properties add gutters between rows and columns in Grid, Flexbox, and multi-column layout. gap is the shorthand. Unlike margins on children, gaps appear only between layout tracks or items, not around the outer edge of the container.

.list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

Media queries respond to the user agent or viewport, including width and preferences such as reduced motion. Container queries respond to an ancestor container's size or styles, so a reusable component can adapt to the space where it is placed.

.card-shell { container-type: inline-size; }
@container (width > 36rem) {
  .card { grid-template-columns: 12rem 1fr; }
}

A transition interpolates a property when its value changes and needs a before and after state. An animation uses @keyframes and can run through several stages without a state change. Prefer transform and opacity for smooth motion when they achieve the required effect.

.button { transition: transform 180ms ease; }
.button:hover { transform: translateY(-2px); }

Define stages with @keyframes and apply them with animation properties. Put non-essential motion inside a prefers-reduced-motion: no-preference query, or provide a reduced version for users who request less motion.

@media (prefers-reduced-motion: no-preference) {
  .notice { animation: enter 300ms ease-out; }
}
@keyframes enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

opacity affects the entire element after it is rendered, including its children. An alpha channel in a color affects only that color value, such as a background, while child content can remain fully opaque.

.faded-card { opacity: 0.5; }
.soft-background { background: rgb(20 40 80 / 50%); }

filter applies graphical effects such as blur, brightness, contrast, or grayscale to an element's rendered result. Filters can be useful for visual states, but strong blur and large filtered areas may be expensive to render.

.thumbnail { filter: grayscale(100%); }
.thumbnail:hover { filter: none; }

Logical properties describe directions using the writing mode instead of fixed physical sides. inline maps to the text direction and block maps to the direction in which lines are stacked. This makes layouts work more naturally across left-to-right, right-to-left, and vertical writing modes.

.card {
  margin-inline: auto;
  padding-block: 1rem;
}

A preprocessor such as Sass converts its own syntax into CSS and can provide mixins, functions, modules, and build-time logic. It is not always necessary because modern CSS includes custom properties, nesting, math functions, and other features. Use one when its build-time tools solve a real project need.

$brand-color: #315c8c;
.button {
  color: $brand-color;
}

This example uses Sass syntax and must be compiled to CSS.