CSS Interview Questions

A CSS rule genuinely consists of a selector, targeting the element to actually style, followed by a declaration block in curly braces containing one or more property-value pairs, like p { color: blue; font-size: 16px; }.

Inline styles, written directly on an element using the style attribute. Internal styles, written inside a <style> tag within the document's own head. External styles, written in a genuinely separate .css file linked through a <link> tag, which is the genuinely most common and maintainable approach for anything beyond a trivial page.

The cascade is the genuine set of rules determining which style actually applies when multiple, genuinely conflicting rules target the exact same element, based on specificity, the order rules appear in, and whether a rule is genuinely marked important. It's called cascading because styles genuinely flow down and combine from multiple genuinely different sources.

A class selector, .className, can genuinely be applied to multiple elements at once, and one element can genuinely have several classes. An ID selector, #idName, should genuinely be unique to just one single element on the page, and carries genuinely higher specificity than a class selector when both target the same element.

An attribute selector targets an element based on an actual HTML attribute it already carries, useful for styling a native element like a specific input type without needing to add an extra class to it at all. A class selector requires the element to actually carry that specific class name in its markup, giving more explicit control but requiring the HTML itself to be edited to add it.

/* this is a comment */ marks text that CSS genuinely ignores entirely, used to actually explain or temporarily disable a piece of CSS code without deleting it, similar in purpose to comments in any other programming language.

Every HTML element is treated as a genuinely rectangular box made up of content (the actual text or image), padding (space between content and the border), border (a genuinely visible edge around the padding), and margin (space genuinely outside the border, separating the element from its neighbors).

Margin collapsing happens when the vertical margins of two adjacent block-level elements, or a parent and its first or last child, combine into a single margin equal to the larger of the two, rather than adding together. It commonly surprises a developer expecting the space between two stacked elements to equal the sum of both their margins.

Padding is space genuinely inside an element's own border, between the border and the actual content, and it's genuinely part of the element's own background. Margin is space genuinely outside an element's border, separating it from other, neighboring elements, and it's genuinely transparent, showing whatever's behind it.

content-box, the genuine default, calculates an element's specified width and height as applying only to its content, so padding and border genuinely add extra size on top of that. border-box instead includes padding and border genuinely within the specified width and height, which many developers find more genuinely predictable to actually work with.

It makes an element's genuinely actual rendered size match its specified width and height exactly, regardless of how much padding or border is genuinely added, which avoids the genuinely common, confusing surprise of an element growing larger than intended simply because padding was added to it.

border genuinely takes up space and affects an element's actual layout, pushing neighboring content. outline is genuinely drawn outside the border without affecting layout at all, commonly used for a genuine focus indicator, since it doesn't shift surrounding content when it's genuinely added or removed.

Setting margin: 0 auto; on an element with a genuinely defined width tells the browser to automatically distribute the genuinely remaining horizontal space equally on both sides, effectively centering that element within its own parent container.

Type selectors target an HTML element by its own tag name, like p. Class selectors target elements sharing a specific class, like .highlight. ID selectors target one specific element by its unique ID, like #header. Attribute selectors target elements based on a genuine attribute's presence or value, like [type='text'].

A descendant selector, written as div p, selects a p element genuinely nested anywhere inside a div, at any level of nesting. A child selector, div > p, selects only a p that's genuinely a direct, immediate child of a div, not one nested more deeply inside another element.

A pseudo-class targets an element in a genuinely specific state, rather than based on its type or attributes. :hover is a genuinely common example, applying a style only while a user's cursor is actually hovering over that specific element.

A pseudo-class, like :hover, targets an element in a genuinely specific state. A pseudo-element, like ::before, targets a genuinely specific part of an element, or lets you actually insert generated content, that doesn't genuinely correspond to an actual, existing HTML element in the document itself.

Specificity determines which genuinely conflicting rule actually wins when multiple selectors target the exact same element. An ID selector genuinely carries more specificity than a class selector, which in turn carries more than a plain type selector, and understanding this genuinely explains why a style you wrote sometimes doesn't actually apply.

!important genuinely overrides normal specificity rules, forcing that specific declaration to actually apply regardless of any other rule's own specificity. It's genuinely used sparingly because overusing it makes a stylesheet's genuinely actual behavior much harder to predict and debug, since it genuinely breaks the normal, predictable cascade.

display controls how an element is genuinely treated in the overall page layout. block elements genuinely take up the full available width and start on a genuinely new line. inline elements genuinely flow within surrounding text, taking up only as much width as their content needs. none genuinely removes an element from the layout entirely.

display: none genuinely removes an element from the layout entirely, as if it doesn't exist at all, so surrounding elements genuinely shift to fill the space. visibility: hidden genuinely hides an element visually but still reserves its own space in the layout, so surrounding elements genuinely don't shift at all.

static, the genuine default, follows normal document flow. relative positions an element genuinely relative to where it would normally sit. absolute positions an element genuinely relative to its nearest positioned ancestor, removing it from normal flow. fixed positions it genuinely relative to the browser viewport, staying in place even as the page scrolls.

On its own, position: relative genuinely has no visible effect at all, the element stays genuinely exactly where normal document flow would have placed it. Its genuine practical purpose is establishing a positioning context for a descendant element genuinely set to position: absolute.

z-index controls the genuine stacking order of overlapping elements along an imaginary depth axis, with a higher value genuinely appearing on top of a lower one. It genuinely only takes effect on an element that already has a position value other than static.

float was genuinely originally designed for wrapping text around an image, and using it for genuinely full page layout requires awkward workarounds, like clearing floats to prevent a genuine layout collapse. Flexbox was genuinely purpose-built for actual layout, offering direct, predictable control over alignment and spacing that float genuinely never provided cleanly.

Flexbox (Flexible Box Layout) is a genuine one-dimensional layout system for actually arranging items in a row or a column, distributing space and aligning items predictably. It solved the genuine problem of older techniques, like float, being genuinely awkward and unreliable for common layout tasks like vertical centering or evenly spacing a row of items.

display: flex; on a parent element genuinely turns it into a flex container, and its genuinely direct children automatically become flex items, laid out according to Flexbox's own genuine rules, by default arranged in a horizontal row.

flex-direction determines whether flex items are genuinely laid out in a row (the genuine default) or a column, and whether that direction is genuinely reversed, like row-reverse, which lays items out from right to left instead of the genuine standard left to right.

justify-content genuinely aligns items along the main axis, the genuine direction items flow in, row by default. align-items genuinely aligns items along the cross axis, genuinely perpendicular to the main axis. Together they control genuine horizontal and vertical alignment, though which one controls which axis genuinely depends on the current flex-direction.

Setting justify-content: center; and align-items: center; together on the flex container genuinely centers its child items along both the main and cross axes simultaneously, a task that was genuinely awkward to achieve reliably with older CSS layout techniques.

By default, flex items genuinely try to fit onto a single line, shrinking if necessary. flex-wrap: wrap; lets items genuinely wrap onto multiple lines instead once they no longer fit on one, which is genuinely useful for a responsive row of items that needs to actually adapt to a narrower screen.

Named colors, like red or blue. Hexadecimal, like #ff0000. RGB, like rgb(255, 0, 0). And HSL, like hsl(0, 100%, 50%), which is often genuinely more intuitive for adjusting lightness or saturation directly compared to hex or RGB.

RGB specifies a genuine color using red, green, and blue values with no transparency at all. RGBA adds a genuine fourth alpha value, controlling transparency, from 0 (fully genuinely transparent) to 1 (fully genuinely opaque).

font-family specifies which typeface an element's text should actually use. Listing several fonts, separated by commas, provides genuine fallback options, so if the genuinely first, preferred font isn't actually available on a given user's device, the browser tries the next one in the list.

font-weight: bold is genuinely a purely visual, presentational styling choice with no semantic meaning attached. <strong> genuinely conveys actual semantic importance to a screen reader or a search engine, in addition to typically also rendering bold by default, making it the genuinely more appropriate choice when text is actually, genuinely important, beyond just visually bold.

font-size genuinely controls how large the actual text characters themselves are rendered. line-height genuinely controls the vertical space allocated for each line of text, including space above and below the actual characters, directly affecting how genuinely cramped or spaced out multiple lines of text actually appear.

flex: 1 genuinely expands to flex-grow: 1, flex-shrink: 1, flex-basis: 0%, meaning the item genuinely ignores its own natural content size and instead grows to genuinely fill an equal share of the available space alongside any other genuine sibling items also set to flex: 1.

Set flex: 1 on each of the three genuine child items within a flex container, which tells each one to genuinely grow equally, ignoring its own natural content-based size, and evenly split the container's genuine total available width three ways.

align-items sets the genuine cross-axis alignment for every flex item within a container all at once. align-self genuinely overrides that shared setting for one genuinely specific individual item, letting a single item align genuinely differently from its siblings within the exact same flex container.

order lets you genuinely change the visual order flex items appear in, independent of their actual order in the underlying HTML. The genuine caution is that changing visual order without changing the actual HTML order can genuinely create a confusing experience for a screen reader user, whose reading order still genuinely follows the underlying HTML, not the visual rearrangement.

CSS Grid is a genuinely two-dimensional layout system, handling both rows and columns together at once. Flexbox is genuinely one-dimensional, handling either a row or a column at a time. Grid genuinely fits an overall page layout well, while Flexbox genuinely fits aligning items within a single row or column.

display: grid; turns a container into a grid container. grid-template-columns: 1fr 1fr 1fr; genuinely defines three equal-width columns, with fr (a fractional unit) representing a genuine share of the available space.

fr represents a genuine fractional unit of the available space within a grid container. grid-template-columns: 2fr 1fr; genuinely creates two columns where the first takes up genuinely twice as much space as the second, out of whatever total space is genuinely available.

grid-column: 1 / 3; on a specific item tells it to genuinely start at the first grid line and end at the third, spanning across two genuine columns, rather than occupying just the single genuine cell it would otherwise default to.

grid-template-areas lets you genuinely define a visual, named layout using a readable, text-based grid diagram directly in the CSS, then assign each item to a genuinely named area. Positioning with grid-column and grid-row directly is genuinely more precise for a complex, irregular layout, but grid-template-areas is often genuinely more readable for a straightforward, page-level layout.

A media query applies a genuine block of CSS only when a specified condition, most commonly the viewport's own width, is actually met, like @media (max-width: 768px) { ... }. It solves the genuine problem of a single, fixed layout looking genuinely wrong on a screen size it wasn't genuinely designed for.

Mobile-first writes base styles for a genuinely small screen first, then uses media queries with min-width to actually add complexity for larger screens, rather than the reverse. It's genuinely recommended because it naturally forces you to prioritize genuinely essential content and functionality first, which tends to produce a genuinely cleaner, more focused design overall.

<meta name='viewport' content='width=device-width, initial-scale=1'> tells a mobile browser to genuinely render the page at the device's actual width, rather than a wider desktop-oriented default layout scaled down. Without it, media queries genuinely won't correctly detect and adapt to an actual mobile screen size at all.

A fixed layout uses genuinely absolute pixel widths that don't actually adapt to different screen sizes, looking genuinely wrong on a screen much smaller or larger than it was originally designed for. A fluid, responsive layout uses genuinely relative units and media queries to actually adapt its structure and sizing to genuinely fit whatever screen it's actually being viewed on.

max-width: 100%; height: auto; on an image lets it genuinely shrink to fit within its parent container's own actual width, while genuinely maintaining its correct aspect ratio, rather than the image simply overflowing or being genuinely stretched out of proportion.

em is genuinely relative to the font size of its own immediate parent element, which can genuinely compound unpredictably when nested. rem is genuinely relative to the root html element's own font size, staying consistent and predictable no matter how deeply an element is actually nested within the page.

vh and vw are genuinely relative to the actual browser viewport's height and width respectively, regardless of an element's own parent container's size. A percentage is genuinely relative to that specific element's own parent, which can produce a genuinely different, and sometimes unexpected, result depending on how that parent itself happens to actually be sized.

A custom property, defined like --main-color: blue; and used like color: var(--main-color);, lets you genuinely store and reuse a value throughout a stylesheet. Unlike a preprocessor variable, a genuine CSS custom property remains actually live in the browser and can genuinely be changed dynamically through JavaScript or overridden within a genuinely specific scope.

Using rem lets a user's own browser-level font size preference, often adjusted for genuine accessibility reasons, actually scale every element sized in rem proportionally, while a genuinely fixed pixel value ignores that user preference entirely, which can genuinely hurt readability for someone who's actually increased their browser's default font size.

transition genuinely animates a smooth change between two states of a CSS property over a specified duration, rather than the change happening genuinely instantly. transition: background-color 0.3s ease; genuinely animates a background color change over 0.3 seconds whenever it's actually triggered, like on :hover.

A keyframe animation, defined with @keyframes, lets you genuinely define multiple intermediate steps an animation passes through over time, offering genuinely far more control than a simple transition, which only genuinely animates smoothly between exactly two states, a starting point and an ending point.

Animating width genuinely triggers a layout recalculation on every single frame, which can genuinely be expensive and cause visible jank on a complex page. Animating transform genuinely doesn't trigger a layout recalculation at all, and can often genuinely be handled directly by the GPU, making it the meaningfully more performant choice for a genuinely smooth animation.

animation-fill-mode determines what styles genuinely apply to an element before the animation genuinely starts and after it genuinely ends. forwards genuinely keeps the styles from the animation's genuinely final keyframe applied even after it completes, rather than the element reverting back to its genuinely original styles.

Both genuinely create as many columns as will actually fit given a defined minimum column width. auto-fit genuinely collapses any empty, leftover tracks down to zero width, letting existing columns genuinely stretch to fill the remaining space. auto-fill genuinely keeps those empty tracks at their full defined width, even though they're genuinely empty, which can leave a visible gap.

A container query applies styles based on a genuinely specific parent container's own actual size, rather than the entire browser viewport's size. It solves the genuine problem of a reusable component needing to genuinely adapt its own styling based on the actual space it's given, regardless of the overall page's viewport size, something a media query alone genuinely can't express.

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); automatically fits as many genuinely 250px-minimum columns as the container's own current width allows, growing or shrinking that number fluidly as the container itself resizes, with genuinely no media query breakpoints required at all.

The :has() pseudo-class lets you genuinely select a parent element based on whether it actually contains a specific descendant, something CSS genuinely couldn't do at all before its introduction, since selectors had previously only ever been able to genuinely target a descendant based on its own ancestor, never the reverse.

aspect-ratio: 16 / 9; genuinely maintains a fixed width-to-height ratio for an element directly, without needing the older, genuinely awkward technique of using a percentage-based padding-top trick to force an aspect ratio, which worked but was genuinely much less intuitive to actually read and maintain.

Adopting a genuinely consistent naming methodology, like BEM, keeps selectors genuinely flat and low-specificity by design, relying on class names alone rather than nested selectors, which meaningfully reduces the genuine likelihood of an unexpected specificity conflict as the codebase actually grows.

BEM is a genuine naming convention structuring class names as block__element--modifier, like card__title--highlighted. It solves the genuine problem of CSS class names colliding or becoming genuinely ambiguous as a project grows, by making each class name genuinely self-descriptive about exactly what it represents and how it relates to other classes.

Modern browsers evaluate a genuine selector from right to left, so a deeply nested selector requires genuinely checking many more elements against the rightmost part of that selector before actually confirming a match, which can genuinely add real, measurable overhead on a page with a very large number of elements.

Critical CSS is the genuinely minimal set of styles needed to actually render the content visible above the fold on initial page load. Inlining just that critical CSS directly in the HTML's head, and loading the genuinely remaining stylesheet asynchronously, avoids a genuinely large, render-blocking stylesheet delaying the very first meaningful paint.

Browser developer tools, like Chrome DevTools' own Coverage tab, can genuinely show which specific CSS rules were actually applied during a page load and which genuinely weren't, helping identify dead, unused code that can safely be genuinely removed to actually reduce the stylesheet's overall size.

Define genuine design tokens, colors, spacing, typography scale, as CSS custom properties or a shared configuration, and build genuinely reusable, well-documented components on top of them, so a visual change to a token genuinely propagates consistently everywhere it's actually used, rather than needing to be manually updated in dozens of genuinely separate places.

A utility-first framework provides genuinely small, single-purpose classes, like flex or p-4, composed directly in the HTML rather than writing genuinely custom, named classes with their own separate CSS rules. The trade-off is genuinely more verbose HTML markup, in exchange for avoiding genuinely inventing and maintaining a large number of custom class names and their associated CSS.

CSS Modules or a scoped CSS-in-JS solution genuinely, automatically namespace class names to avoid a genuine collision with the third-party library's own class names. Where that genuinely isn't an option, careful, deliberate namespacing of your own application's classes helps reduce the genuine risk of an unexpected style leaking across that boundary.

@layer lets you genuinely define explicit layers of CSS, controlling which layer's rules genuinely take priority over another's, independent of a genuine selector's own specificity. It solves the genuine, longstanding problem of a third-party library's CSS unexpectedly overriding your own application's styles, or the reverse, by letting you genuinely, explicitly control layer priority regardless of specificity.

I'd weigh the actual, genuine pain points the current approach is causing, genuine naming collisions, difficulty tracing which styles actually affect a component, against the real cost and genuine runtime overhead the alternative approach would introduce. Migrating an entire, genuinely large, already-working codebase is rarely worth it without a genuinely concrete, currently-felt problem driving the decision.

Visual regression testing tools, like Percy or Chromatic, capture genuine screenshots of key components or pages and automatically compare them against a genuinely previous, approved baseline, flagging any actual, meaningful visual difference for a human to genuinely review before it's actually merged.

The browser genuinely parses HTML into the DOM and CSS into the CSSOM, combines them into a render tree, calculates layout (the genuine position and size of every element), and then paints actual pixels to the screen. CSS genuinely affects every one of those later stages, layout, paint, and compositing.

A property like width genuinely triggers a full layout recalculation, the most genuinely expensive kind of change. A property like background-color triggers genuine repainting but not layout. A property like transform or opacity can genuinely be handled purely at the compositing stage, the genuinely cheapest and fastest kind of visual change to actually animate.

will-change hints to the browser that a genuinely specific property is about to change, letting it proactively genuinely optimize for that upcoming change, like promoting an element to its own genuine compositing layer ahead of time. Overusing it on genuinely many elements can actually consume excessive memory, since each promoted layer genuinely carries real overhead, making performance genuinely worse rather than better.

A compositing layer is a genuinely separate surface the browser can move, scale, or fade independently, without needing to genuinely repaint the rest of the page. Understanding it matters because an animation genuinely confined to its own compositing layer, animating only transform and opacity, can run smoothly even while the rest of the page is genuinely otherwise busy.

The browser's own Performance panel records a genuine timeline showing exactly where time is being spent, layout, paint, or compositing, during the actual janky interaction. A genuinely large number of layout recalculations, often called layout thrashing, during an animation is a genuinely common, identifiable cause worth specifically looking for.

Layout thrashing happens when code genuinely alternates between reading a layout property, like offsetHeight, and writing a style change, repeatedly, forcing the browser to genuinely recalculate layout synchronously on every single alternation rather than genuinely batching those changes together efficiently.

Paint fills in the actual pixels for elements, colors, text, shadows, onto separate layers. Composite then combines those already-painted layers together on screen, applying transforms and opacity cheaply without repainting anything. Animating a property handled purely at the composite stage, like transform, skips the more expensive paint step entirely, which is exactly why it runs more smoothly than animating a property that forces a repaint.

Migrate incrementally, establishing the genuinely new convention for all genuinely new code first, and refactoring existing, genuinely high-traffic or frequently-modified areas of the legacy CSS opportunistically, rather than attempting a single, genuinely large, disruptive rewrite of the entire stylesheet all at once.

I check whether it's genuinely solving a real, currently-felt problem rather than change for its own sake, whether it's genuinely consistent with patterns already established elsewhere in the codebase, and whether it will genuinely scale reasonably as the number of components and contributing developers continues to grow.

Automate what can genuinely be automated, a linter enforcing naming conventions and flagging excessive specificity, run directly in CI so standards aren't purely a matter of individual opinion during manual review. For conventions that genuinely resist full automation, I'd document the handful of decisions that actually matter most, along with the real reasoning behind each one.

I'd weigh genuine development speed and consistency benefits against the real cost of a team unfamiliar with the utility-first approach needing to genuinely adjust, and whether the organization's own existing components could realistically be migrated without an genuinely excessive amount of rework.

Check actual, current browser support data for any specific CSS feature genuinely in use on that page, since the issue is very often a feature the affected browser simply doesn't fully support yet, rather than an actual, genuine bug in the CSS itself. Testing directly in the affected browser's own developer tools usually reveals the actual, specific root cause fastest.

Automated visual regression testing, comparing genuine screenshots against an approved baseline, integrated directly into CI, catches a genuinely meaningful subset of visual bugs automatically and consistently on every single change, paired with periodic, genuine manual review for anything a purely automated screenshot comparison alone might genuinely miss.

Treat the component's actual visible appearance and its genuine CSS custom property interface as a contract, since other teams may have built on top of specific visual assumptions, even if those assumptions were genuinely never actually documented at the time. Changing a genuinely widely-used shared style needs the same care and advance communication as changing any other kind of shared, depended-upon API.

I'd roll back the change immediately if that's genuinely possible, prioritizing stopping active visual impact over fully understanding root cause first. Then I'd investigate specifically whether it was a genuinely broken CSS specificity conflict, a genuine cross-browser rendering issue, or a genuinely missing asset, since each requires a meaningfully different kind of fix going forward.

Invest early in a genuinely well-documented, consistent design system that most genuinely new work is actually built from by default, rather than each genuinely new page or feature inventing its own styling patterns independently from scratch. Consistency at that shared component layer scales dramatically better across a large, growing team than relying purely on individual developer discipline alone.

This is a judgment question interviewers use to see how you reason under genuine uncertainty, not to test a specific textbook fact. A strong answer names the actual constraint that forced the decision, the realistic options that were genuinely on the table, why you picked one knowing it wasn't guaranteed to be right, and what you'd do differently with what you know now.

I'd walk through one of their actual specificity conflicts together, showing directly how the browser's own genuine specificity calculation determined which rule actually won, rather than simply telling them !important is genuinely bad practice in the abstract. Understanding the actual, concrete mechanism tends to change their habits far more effectively than a general rule alone.

I wouldn't lead with naming conventions as an abstract best practice. I'd point to a specific, real, already-experienced incident where a genuine naming collision or an unexpected specificity conflict caused a real, visible bug, and show concretely how a structured convention would have genuinely prevented that exact same specific problem.

I'd bring a concrete, working prototype demonstrating the actual trade-off, rather than a vague, unsubstantiated concern about difficulty. Often there's a version that gets most of the desired visual effect with meaningfully less implementation cost, and showing that concrete alternative resolves the disagreement faster than simply pushing back on the original design.

I'd translate the migration into terms leadership already tracks: how much longer a typical styling change now takes in the legacy code compared to a well-structured part of the same codebase, and a specific visual bug that traced directly back to the current architecture's own specificity conflicts. Framed as a velocity problem with a real, already-incurred cost, it competes far better for prioritization than framed as a general code-quality concern.