CSS questions test whether you can build layouts that work on every screen. These CSS interview questions cover selectors, the box model and specificity for freshers, then flexbox, grid, positioning, responsive design, animations, architecture and modern CSS features for experienced frontend developers.
30 questions · Updated
Fundamentals, definitions and simple scenarios. Good for freshers and warm-ups.
Specificity decides which rule wins when several target the same element.
Inline styles beat IDs, IDs beat classes, attribute selectors and pseudo-classes, and those beat element selectors and pseudo-elements.
If specificity is equal, the later rule wins. !important overrides normal rules and should be avoided.
Keeping selectors low-specificity, such as single classes, makes CSS easier to maintain.
display: none removes the element from the layout entirely, so it takes no space and is hidden from screen readers. visibility: hidden hides it but keeps its space in the layout. opacity: 0 makes it invisible but still clickable and accessible. For hiding content visually while keeping it for screen readers, a visually-hidden utility class is used.
static is the default, in normal flow. relative stays in flow but can be offset, and becomes the reference for absolutely positioned children. absolute is removed from flow and positioned relative to the nearest positioned ancestor. fixed is positioned relative to the viewport and stays on scroll. sticky acts as relative until a scroll threshold, then sticks like fixed within its container.
Every element is a box of content, padding, border and margin.
With the default box-sizing: content-box, width and height apply only to the content, so padding and border add to the total size.
With box-sizing: border-box, width includes padding and border, which makes sizing predictable, so most projects apply it to all elements.
Inline styles in a style attribute, internal styles in a <style> tag in the head, and external stylesheets linked with <link rel="stylesheet">.
External files are preferred because they can be cached, reused across pages and kept separate from content.
Inline styles have very high specificity and are hard to maintain, though frameworks sometimes use them for dynamic values.
Type selectors (p), class (.card), ID (#header), attribute ([type="email"]), the universal selector (*), and combinators: descendant (nav a), child (ul > li), adjacent sibling (h2 + p) and general sibling (h2 ~ p).
Pseudo-classes such as :hover and pseudo-elements such as ::before complete the set.
Selectors can be grouped with commas.
When the top and bottom margins of block elements touch vertically, they combine into a single margin equal to the larger of the two, instead of adding up.
It also happens between a parent and its first or last child when nothing separates them.
It does not happen in flex or grid layouts, or with padding, borders or display: flow-root on the parent.
Block elements start on a new line and take the full width, and accept width, height and vertical margins.
Inline elements flow within text, take only the width of their content and ignore width, height and vertical margins.
Inline-block elements flow inline like text but accept width, height and all margins and padding, which suits buttons and badges.
Named colours (red), hex (#1a73e8, with optional alpha #1a73e880), rgb() and hsl() with optional alpha, and modern spaces such as oklch(), which gives more even, predictable lightness and access to wider colour gamuts. HSL and OKLCH make it easy to create lighter and darker shades of a brand colour, and color-mix() blends colours directly in CSS.
float moves an element to the left or right so text wraps around it, which was originally meant for images in articles.
Before flexbox and grid, floats were used for whole page layouts, needing clearfix tricks to stop parents collapsing.
Today floats should only be used for wrapping text around images; flexbox and grid handle layout.
Pseudo-classes, with one colon, select an element in a state or position: :hover, :focus, :checked, :first-child, :nth-child(odd). Pseudo-elements, with two colons, style part of an element or add generated content: ::before, ::after, ::placeholder, ::marker and ::first-line. ::before and ::after need a content property to appear.
Applied problems, trade-offs and questions about your own projects.
Flexbox is one-dimensional: it lays items out in a row or column and is ideal for components such as navigation bars, buttons with icons, and centring.
Grid is two-dimensional, controlling rows and columns together, and is ideal for page layouts, card grids and complex alignments.
They work well together, for example a grid page layout with flex components inside.
The simplest modern ways are display: flex with justify-content: center and align-items: center on the parent, or display: grid with place-items: center. For an absolutely positioned element, use top: 50%, left: 50% and transform: translate(-50%, -50%), or inset: 0 with margin: auto and a set size.
px is a fixed unit. em is relative to the element's own font size (or the parent's for font-size), so it compounds when nested. rem is relative to the root font size, which makes it predictable and respects user font settings, so I use rem for font sizes and spacing. % is relative to the parent. vw and vh are 1% of the viewport width and height; dvh handles mobile browser bars better.
I design mobile-first with fluid layouts using flexbox and grid, relative units and max-width, then add min-width media queries where the design breaks, not for specific devices. Images use max-width: 100% and srcset. clamp() creates fluid typography, grid with repeat(auto-fit, minmax(250px, 1fr)) creates responsive cards without media queries, and container queries style components based on their container size.
Custom properties store values for reuse, declared like --brand: #0a7 and used with var(--brand, fallback).
Unlike Sass variables, they are live in the browser: they cascade and inherit, can be changed inside media queries or by a theme class, and can be read and updated by JavaScript.
They are the basis of design tokens and dark mode themes.
A transition animates a property smoothly when its value changes, for example on hover, between a start and end state, with transition: transform 200ms ease.
An animation uses @keyframes to define several steps and can run on its own, loop, alternate direction and be paused.
Transitions suit simple state changes; keyframe animations suit loaders and more complex motion.
For one line, combine white-space: nowrap, overflow: hidden and text-overflow: ellipsis on an element with a set width.
For several lines, use display: -webkit-box with -webkit-line-clamp: 3, -webkit-box-orient: vertical and overflow: hidden, or the standard line-clamp property where supported.
Make sure the full text is still available, for example in a title or on the detail page.
grid-template-areas lets you name regions of a grid and draw the layout as text, such as "header header" "sidebar main", then place elements with grid-area: header.
The fr unit shares out the free space, so grid-template-columns: 1fr 3fr gives the second column three times the space.
Changing the areas inside a media query rearranges the whole layout simply.
object-fit controls how an image or video fills its box when their proportions differ. cover fills the box completely and crops the excess, contain shows the whole image with empty space, fill stretches it, and none keeps its original size. object-position chooses which part stays visible. It is essential for consistent card images and avatars.
Sass adds variables, nesting, mixins, functions, loops and partials that compile to plain CSS, which made large stylesheets easier to organise. Many of these features now exist in CSS itself, including custom properties, nesting, calc() and cascade layers, so new projects often need Sass less, but it remains common in existing codebases and design systems.
calc() mixes units in calculations, such as width: calc(100% - 2rem). min() and max() pick the smaller or larger of several values, for example width: min(100%, 60ch). clamp(min, preferred, max) keeps a value between limits, so font-size: clamp(1rem, 2.5vw, 2rem) gives fluid typography that never becomes too small or too large, without media queries.
System design, deep internals, leadership and tough follow-ups.
A stacking context is a group of elements stacked together on the z-axis. z-index only compares elements within the same stacking context.
New contexts are created by positioned elements with a z-index, opacity below 1, transform, filter, isolation: isolate and some other properties.
If a parent has created a context with a low z-index, a child with z-index 9999 still cannot appear above elements outside that parent.
Animate only transform and opacity where possible, because they can run on the compositor without triggering layout or paint.
Avoid animating width, height, top or left, which cause layout recalculation.
Use will-change sparingly for elements about to animate, prefer CSS transitions and animations over JavaScript for simple effects, and respect prefers-reduced-motion for users who are sensitive to motion.
Options include naming methods like BEM, CSS Modules for locally scoped class names, utility-first frameworks like Tailwind CSS, and CSS-in-JS.
I combine design tokens as CSS custom properties for colours, spacing and typography, a small base layer, component-scoped styles, and cascade layers (@layer) to control order.
The goal is predictable styles without specificity wars or dead code.
Container queries style an element based on the size of its container rather than the whole viewport.
You mark a parent with container-type: inline-size, then write @container (min-width: 400px) { ... } rules for its children.
A card component can then switch to a horizontal layout wherever it has enough room, in a sidebar or a main column, which makes components truly reusable.
Changing geometry, such as width, height, position or font size, triggers layout (reflow), where the browser recalculates positions, which is the most expensive step.
Changing colours or backgrounds triggers paint.
Changing transform or opacity can often be handled by the compositor on the GPU without layout or paint.
Reading layout values such as offsetHeight right after writing styles forces layout and causes layout thrashing.
Define colours as custom properties on :root, then redefine them inside @media (prefers-color-scheme: dark) to follow the system setting. To let users override it, set a data-theme attribute on the html element with JavaScript, save the choice in localStorage, and apply it before the first paint to avoid a flash. color-scheme: light dark makes form controls and scrollbars match, and light-dark() simplifies paired values.
Logical properties describe direction relative to the writing mode instead of the screen: margin-inline-start instead of margin-left, padding-block instead of padding-top and bottom, inset-inline-end instead of right, and inline-size instead of width. Layouts then flip correctly for right-to-left languages such as Arabic and Urdu without separate stylesheets.
:is() matches any selector in its list, shortening long selectors, and takes the specificity of its most specific argument. :where() works the same but always has zero specificity, which is ideal for easy-to-override base styles. :has() is a parent selector: card:has(img) styles cards that contain an image, and form:has(:invalid) styles a form with invalid fields, which used to require JavaScript.
See all Frontend Developer interview questions, covering HTML, CSS, JavaScript, TypeScript, React and more.