CSS Interview Questions

Every element is a box of content, padding, border and margin. With the default content-box, width covers only the content; padding and border are added on top. With border-box, width includes padding and border, which makes sizing predictable.

static (default flow), relative (offset from its normal place), absolute (positioned relative to the nearest positioned ancestor), fixed (relative to the viewport) and sticky (behaves like relative until a scroll threshold, then sticks).

px is a fixed unit. em is relative to the font size of the element (or parent for font-size), so it compounds when nested. rem is relative to the root font size, which makes it predictable and good for accessibility.

Inline styles (style="…"), an internal <style> block and an external stylesheet linked with <link rel="stylesheet">. External files are preferred: they are cached, shared across pages and keep content separate from presentation. Inline styles also have the highest specificity, which makes them hard to override.

The algorithm that decides which declaration wins when several rules set the same property. It compares origin and importance (!important), then cascade layers, then specificity, and finally source order — the later rule wins.

Mostly text-related ones: color, font-family, font-size, line-height, text-align, visibility. Box properties such as margin, padding, border, width and background are not inherited. Any property can be forced with the inherit keyword.

display: none removes the element from layout and from the accessibility tree. visibility: hidden keeps its space but hides it and makes it non-interactive. opacity: 0 keeps space and still receives clicks and focus.

Block elements start on a new line and take the full width; width, height and vertical margins apply. Inline elements flow inside text and ignore width, height and vertical margins. inline-block flows like text but respects width, height and all margins.

Flexbox is one-dimensional — ideal for laying out items in a single row or column such as toolbars and navigation. Grid is two-dimensional — ideal for page layouts and galleries where rows and columns must align. They are often combined.

Specificity is compared as a tuple: inline styles, then ID selectors, then classes/attributes/pseudo-classes, then elements/pseudo-elements. The higher tuple wins; on a tie, the later rule wins. !important overrides normal declarations.

Pseudo-classes (:hover, :focus-visible, :nth-child) select elements in a particular state. Pseudo-elements (::before, ::after, ::placeholder) style a specific part of an element or insert generated content.

z-index only applies to positioned elements (and flex/grid items) and compares within the same stacking context. A parent with transform, opacity < 1 or its own z-index creates a new stacking context, trapping children inside it.

Custom properties (--brand: #4f46e5) live in the browser, cascade, inherit and can be changed at runtime — for example to switch themes. Sass variables are replaced at build time and cannot change after compilation.

Write base styles for small screens first, then add min-width media queries to enhance layouts for larger screens. It keeps CSS simpler and prioritises the most constrained devices.

Vertical margins of adjacent block elements (or a parent and its first/last child) combine into a single margin equal to the larger one, instead of adding up. It does not happen in flex or grid containers, with padding or borders between them, or with horizontal margins.

The modern answer is a flex or grid container: display: grid; place-items: center; or display: flex; justify-content: center; align-items: center. For a fixed-width block, margin-inline: auto centres it horizontally.

1.center {
2  display: grid;
3  place-items: center;
4  min-height: 100vh;
5}

flex-basis is the starting size before free space is shared. flex-grow sets how much of the leftover space an item takes; flex-shrink how much it gives up when there is not enough room. flex: 1 means 1 1 0%: grow equally from zero.

It creates as many columns as fit, each at least 250px and sharing leftover space equally — a responsive card grid with no media queries. auto-fit collapses empty tracks so items stretch; auto-fill keeps empty tracks.

Named regions that let you draw the layout in ASCII: grid-template-areas: "header header" "sidebar main". Children are placed with grid-area: header. Redefining the areas in a media query rearranges the whole page without touching HTML.

A transition animates a property between two states when it changes (for example on :hover). A @keyframes animation can run on its own, loop, have many steps and play on page load. Both should respect prefers-reduced-motion.

An isolated layer in which z-index values are compared. It is created by position with z-index, opacity below 1, transform, filter, isolation: isolate and more. A child can never appear above something outside its parent’s stacking context, whatever its z-index.

transform and opacity can usually be handled by the compositor without triggering layout or paint, so they animate smoothly. Animating width, height, top or left forces layout recalculation on every frame.

Use a consistent methodology (BEM, utility-first, or CSS Modules), design tokens via custom properties, low and flat specificity, and component-scoped styles. Avoid deep nesting and !important.

Media queries respond to the viewport; container queries respond to the size of a parent marked with container-type: inline-size. That lets a component adapt to where it is placed — a card in a sidebar versus in the main column.

Define design tokens as custom properties on :root (--surface, --text, --radius) and use them everywhere. Swap their values for dark mode with prefers-color-scheme or a data-theme attribute. Components then never hard-code colours.

Content that changes size after first paint: images without dimensions, late web fonts, injected banners. Set width/height or aspect-ratio on media, reserve space for dynamic content, and use font-display with size-adjusted fallback fonts.

:is() groups selectors and takes the highest specificity in its list. :where() does the same with zero specificity, ideal for resets. :has() is a parent selector: .card:has(img) styles a card that contains an image.

BEM (block__element--modifier) is a naming convention that keeps specificity flat in global CSS. Utility-first (Tailwind) composes small single-purpose classes in markup. CSS modules scope class names per component at build time. All three avoid accidental global clashes.

Never remove outlines without a replacement. Use :focus-visible to show a clear ring for keyboard users without showing it on mouse clicks, with at least 3:1 contrast against the background.