CSS
275 bites tagged CSS — interview questions with model answers, and 60-second explainers.
How does color-scheme interact with user-agent stylesheets and prefers-color-scheme?
This tests the boundary between author CSS and browser chrome. color-scheme lets the UA recolor native UI like scrollbars and form controls automatically, while prefers-color-scheme styles custom components.
How do you create gradient text in CSS?
Set a gradient background-image, use background-clip: text to clip to glyphs, and color: transparent to reveal it. Mastery of background-clip and CSS box model.
How do CSS Custom Properties manage a design system color palette?
Define --color-primary on :root, use var() for buttons and headings, mention fallbacks. Tokenization and cascade scoping. Confusing CSS variables with SASS or using only local scopes.
What is font-display and how do swap and block differ?
This tests knowledge of the font display timeline. Swap shows fallback immediately then swaps in custom font, while block hides text for a short block period before fallback. A red flag is claiming swap prevents layout shift or that block is superior.
Create a vertical black gradient overlay on a background image
Use linear-gradient with rgba black stops, layer it over the image via stacked backgrounds or a pseudo-element. CSS gradients, alpha channels, and layering. Adding an extra div instead of native background stacking.
Which CSS background properties make a hero image cover its container?
Tests background-size keywords and aspect-ratio behavior. Lead with cover, note it fills the container by cropping while preserving ratio, unlike contain. Red flag: recommending 100% 100% or explicit lengths, which stretch and distort the image.
Explain em, rem, px and why rem is preferred for font sizing
This tests CSS unit semantics and accessibility. px is absolute; em compounds against its parent; rem is root-relative and predictable. rem respects user browser font settings without nesting issues.
How do you declare a custom font and apply it to headings?
This tests @font-face usage for custom web fonts. A good answer declares a font-family name and src URL inside @font-face, then applies that family to heading selectors.
Set paragraph text blue and background light grey, compare HEX, RGB, HSL
Set color and background-color; HEX is compact, RGB is explicit, HSL is intuitive for lightness/hue. CSS color syntax and tradeoffs between HEX, RGB, and HSL. Claiming HEX lacks transparency or equating RGB and HSL.
Explain :is() vs :where() specificity and when to pick :where()
Tests whether you treat specificity as architecture, not just syntax. :where() has zero specificity; :is() adopts the most specific argument's weight. Choose :where() for base resets or utility classes designed to be overridden. Red flag: calling them equal.
How is CSS specificity calculated for a complex selector?
This tests ID-CLASS-TYPE algorithm fluency. A strong answer gives the three-column tally, counts IDs, classes or attributes, and types in order, and notes combinators add zero. A red flag is counting combinators or mixing inline styles into selector scores.
What is margin collapsing? Give a sibling scenario and prevention.
This tests understanding of vertical margin combination in normal flow. A strong answer defines collapsing, gives a sibling paragraph example where the larger margin wins, and names a block formatting context or padding as prevention.
Describe the full CSS cascade precedence order
This tests deep cascade knowledge beyond specificity. A strong answer lists the six origins in order, notes !important reverses them, then layers, specificity, and source order.
How do class and ID selectors differ in specificity and use case?
IDs are 1-0-0 and meant for unique elements; classes are 0-1-0 and reusable. Your grasp of CSS specificity weights and selector architecture. Saying order alone decides specificity or using IDs for repeated components.
What color wins when an ID and class rule conflict?
Red wins; an ID scores 1-0-0 while a class scores 0-1-0, so the ID rule beats the class rule. Your grasp of CSS specificity scoring beyond source order. Saying the last declared rule wins or that order matters.
Explain the CSS box model: content-box vs border-box
Tests if you understand how width maps to rendered size. Good answers contrast content-box (350px + 10px border = 370px) with border-box (stays 350px) and note that four width:25% items break under content-box. Red flag: saying border-box includes margin.
Cross-Browser Testing Automation
Rendering engines disagree, so your CSS may break in Safari while Chrome looks fine. Automation runs your UI across real browsers in CI to catch visual drift early. The footgun is testing every pixel, which breeds brittle suites that teams eventually ignore.
Semantic vs. Primitive Design Tokens
Semantic tokens give meaning to raw values so components bind to intent, not hex codes. They let you rebrand or theme by changing aliases, not component code.
BEM: Scoped CSS Naming by Convention
BEM is a naming convention that scopes CSS classes like postal addresses, preventing specificity wars in component systems. It shines in large codebases with many developers. The footgun is deep element nesting, which bloats markup into unreadable strings.
CSS :has(): Query Parents and Previous Siblings
CSS :has() styles an element based on its children or later siblings, like highlighting a section with a featured card. Previously this required JavaScript. If unsupported, the whole selector block fails, so wrap it in :is() or use progressive enhancement.
CSS-in-JS: Scoped Styles via JavaScript
CSS-in-JS lets components own their styles in JavaScript, generating CSS and injecting it into the DOM at runtime. It prevents global namespace collisions in component frameworks. The footgun is runtime overhead and bigger bundles.
Your button breaks in German: what CSS and API strategies fix it?
Tests i18n resilience. Strong answers pair CSS tactics like text-wrap, min-width, and container queries with API levers such as truncation flags, max-length props, or adaptive icon slots. Red flag: telling translators to shorten text or hardcoding widths.
Shadow DOM: Encapsulating Styles and Structure
Shadow DOM walls off a component's HTML and CSS from the rest of the page. Like a browser's `<video>` player, its internal controls are isolated, preventing your site's CSS from breaking them.
Angular Component Styles: Scoped by Default
Angular styles are scoped to their component by default, preventing one component's styles from accidentally breaking another. This lets you build reusable UI pieces without style conflicts. The footgun is using `::ng-deep`, which breaks this isolation.
Get CSS bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.