CSS interview questions covering responsive design, media and container queries, custom properties, themes, transitions, transforms, animations and modern CSS.
Open a question for the full answer, code and interview guidance.
Responsive web design is an approach in which a website adapts its layout and presentation to different viewport sizes, device capabilities, and available space. It commonly combines flexible layouts, flexible media, and conditional CSS such as media or container queries.
A media query conditionally applies CSS according to characteristics of the output environment, such as viewport width, orientation, resolution, or user preferences. Media queries are a core tool for responsive and adaptive presentation.
A min-width query applies when the viewport or media feature is at least the specified size, while max-width applies when it is no larger than the specified size.
Mobile-first CSS starts with styles appropriate for smaller or simpler layouts and progressively enhances them as more space becomes available. Larger layouts are commonly introduced with min-width media queries.
Breakpoints should be introduced where the content or component no longer fits or communicates effectively. They should respond to the design's needs rather than attempting to target every phone or tablet model.
Container queries allow a component to change its styles according to the size or characteristics of a containing element rather than the entire viewport. They are particularly useful for reusable components that may appear in a narrow sidebar or a wide main-content area.
CSS custom properties, often called CSS variables, are author-defined properties whose names begin with --. Their values participate in the cascade and can be referenced with the var() function.
The var() function can provide a fallback that is used when the referenced custom property is missing or invalid in the relevant way. This makes components more resilient when optional theme or component values have not been defined.
A theme can redefine a set of custom properties at a higher-level element. Components consume the variables instead of hard-coding theme-specific colors throughout their rules.
prefers-color-scheme detects whether the user or operating system expresses a preference for a light or dark color scheme. CSS can use it to provide an automatic theme when the application has not selected another strategy.
prefers-reduced-motion lets CSS detect a user preference for reducing non-essential motion. This is important because large, continuous, or unexpected animations can cause discomfort for some users.
A CSS transition animates a change between values of supported properties when the computed value changes. Developers can control the property, duration, timing function, and delay.
transition-property identifies which properties should transition. transition-duration specifies how long the change takes, transition-timing-function controls the rate of change over time, and transition-delay specifies how long to wait before beginning.
transform changes the visual coordinate system of an element with operations such as translate, scale, rotate, and skew. Multiple transform functions can be combined in one declaration.
transform-origin specifies the point around which a transform is applied. The default is typically the center of the element, but the origin can be moved using keywords, lengths, or percentages.
Keyframe animations define multiple stages of an animation using @keyframes and apply them through animation properties. They are useful when an effect requires more than a simple transition between two states.
A transition normally responds to a change from one property state to another, such as hover or adding a class. A keyframe animation can define several intermediate stages and can start or repeat without requiring the same kind of state transition.
object-fit controls how replaced content such as an image or video is resized within its content box when the box and media aspect ratios differ. Common values include cover, contain, fill, none, and scale-down.
The aspect-ratio property defines a preferred width-to-height ratio for an element. It is useful for reserving predictable media space, creating video frames, maintaining card thumbnails, and reducing layout shifts.
CSS comparison functions allow values to respond to available space without numerous media queries. min() chooses the smallest calculated value, max() chooses the largest, and clamp() constrains a preferred value between a minimum and maximum.
calc() performs arithmetic on compatible CSS values. It is useful when a dimension depends on a combination of relative and fixed values, such as the viewport width minus a sidebar or a full-height panel minus a header.
Logical properties describe dimensions and spacing according to the document's writing mode and text direction rather than hard-coding physical left, right, top, and bottom sides. Examples include margin-inline, padding-block, inline-size, and border-inline-start.
Cascade layers, declared with @layer, allow authors to explicitly control the priority order of groups of styles before selector specificity is considered within the author origin. They can help organize resets, third-party libraries, components, and overrides.
:is() groups selector alternatives and takes specificity from the most specific selector in its argument list. :where() also groups selectors but always contributes zero specificity, making it useful for low-specificity defaults.
Use semantic HTML and let CSS handle presentation. Prefer normal flow, Flexbox, and Grid over unnecessary absolute positioning. Build flexible components with sensible intrinsic sizing, max-width constraints, gap, minmax(), responsive media, and content-driven breakpoints.