CSS3

CSS in current Chrome, Edge, Firefox and Safari Checked Oct 2026 116 code snippets

The model

The cascade picks one value per property, by origin, layer, specificity, then source order. Inheritance fills in what no rule sets.
Every element is a box of content, padding, border and margin. With box-sizing: border-box, width includes the padding and border.
display sets how a box lays out its children, in normal flow, flex or grid. position: absolute and fixed take a box out of the flow.
z-index only compares boxes in the same stacking context. opacity below 1 and transform each start a new one.

A change starts the work where its arrow ends, and every step to the right runs too. transform and opacity skip layout and paint, so animate those.

Cascade & selectors

which rule wins, and what it matches

Which value wins

Settle two rules that clashOrigin, layer, specificity, then source order.

Compare specificityIDs, then classes, then tags. One ID beats any number of classes.

Inherit or roll back a valueinheritunsetrevert

Trap!important beats inline styles and every normal rule. Use it rarely.

Asked in interviews

AskedExplain the CSS cascade and specificity AskedHow does CSS inheritance work, and which properties are inherited?

Resets and cascade layers

Match every element*It adds no specificity.

Make every box border-box*, *::before, *::afterbox-sizing: border-box

Choose a reset or normalizeA reset wipes defaults. Normalize keeps them and fixes browser bugs.

Order your layers once@layer base, utilities;A later layer beats any specificity.

Style a component, stopping at an inner part@scope (.card) to (.body)

TrapUnlayered styles beat every layer, unless the layered rule is !important.

Asked in interviews

AskedHow does the universal selector (*) work and when should you use it?AskedWhat is the difference between resetting and normalizing CSS?AskedExplain CSS cascade layers (@layer)

Selectors and combinators

Match any descendant, or direct children onlydiv pdiv > p

Match the next sibling, or every later oneh2 + ph2 ~ p

Match an attribute by its start, end or middle[href^="https"][href$=".pdf"][href*="docs"]

Count every sibling, or only the same tag:nth-child(2n):nth-of-type(2)

Trapp:nth-child(2) counts every sibling. After a heading, it matches the first paragraph.

Asked in interviews

AskedExplain the different types of CSS selectors AskedExplain attribute selectors and their variations AskedWhat is the difference between :nth-child() and :nth-of-type()?

Pseudo-classes and pseudo-elements

Style a state, or a part of an element:hover::before: for a state, :: for a part.

Number items with CSS alonecounter-reset: itemcounter-increment: itemcontent: counter(item)

Style placeholder text::placeholderAdd opacity: 1, since Firefox dims it.

Highlight text without changing the DOM::highlight(hit)

TrapA placeholder is a hint, not a label. It disappears as the user types.

Asked in interviews

AskedWhat are pseudo-elements and how do they differ from pseudo-classes?AskedWhat are CSS counters and how do you implement them?AskedHow do you style placeholder text?

:is(), :where(), :not() and :has()

Group selectors, with or without specificity:is(h1, h2):where(.btn):where() adds none.

Style a parent by what it contains.card:has(img)h2:has(+ p)

Trap:is(), :not() and :has() take their most specific argument, so :is(#a, p) weighs as much as an ID.

Asked in interviews

AskedWhat do the :is(), :where() and :not() pseudo-classes do?AskedWhat is the :has() selector and how is it useful?

Box model & positioning

how big a box is, and where it sits

Box model and box-sizing

Make width include padding and borderbox-sizing: border-boxMargin is never included.

Set a side that flips with text directionmargin-inline-start: 1rem

TrapUnder the default content-box, width: 200px plus 20px padding and a 5px border renders 250px wide.

Asked in interviews

AskedExplain the CSS box model AskedWhat is box-sizing and what are its values?AskedWhat are CSS logical properties and why are they useful?

Margin, padding and collapsing

Space inside a box, or push boxes apartPadding sits inside the border, margin outside.

Predict two vertical margins that touchThey collapse into the larger one.

Contain floats and stop margins collapsing throughdisplay: flow-rootIt starts a block formatting context.

Asked in interviews

AskedExplain the difference between margin and paddingAskedHow do margins collapse and how can you prevent it?AskedWhat is a block formatting context and how does it work?

Display types and hiding

Tell block, inline and inline-block apartBlock starts a new line. Inline ignores width and height. Inline-block accepts them.

Hide it and close the gap, or keep its spacedisplay: nonevisibility: hidden

Tipopacity: 0 keeps the space and still takes clicks.

Trapdisplay: none and visibility: hidden both hide the element from screen readers too.

Asked in interviews

AskedWhat is the difference between display: none and visibility: hidden?AskedWhat is the difference between inline, inline-block and block elements?AskedWhat are screen reader-only CSS classes?

Size limits and overflow

Fill the parent, up to a maximummax-width: 1200pxWith width: 100%.

Let a flex item shrink below its contentmin-width: 0

Clip, scroll or let content spill outoverflow: autooverflow: clipscroll always shows scrollbars.

TrapIf min-width and max-width conflict, min-width wins.

Asked in interviews

AskedExplain min-width, max-width, and how they interact with widthAskedWhat are the different values for the overflow property?

Position and stacking

z-indexThe card starts a stacking context. Its z:1 loses to z:2, so z:99 can't lift the modal.

Place a box against a positioned parentposition: absoluteGive the parent position: relative.

Stick a header once it scrolls to the topposition: sticky; top: 0

Fix a huge z-index that has no effectMove the box out of the parent's stacking context.

Tie a tooltip to another elementanchor-name: --tipposition-anchor: --tip

Start a stacking context with no side effectsisolation: isolate

Trapoverflow: hidden on a parent can stop sticky. A transform on an ancestor pins fixed to that ancestor.

Asked in interviews

AskedWhat are the different positioning values and how do they work?AskedExplain the z-index property and stacking context AskedWhat is the isolation property and when would you use it?

Flexbox & Grid

lay out rows, columns and whole pages

Flexbox axes and sizing

Align items along and across the main axisjustify-content: centeralign-items: center

Share the free space equallyflex: 1Short for 1 1 0%, which is grow, shrink, basis.

Trapflex-direction: column swaps the axes, so justify-content then works vertically.

Asked in interviews

AskedWhat is Flexbox and what problems does it solve?AskedExplain the main axis and cross axis in Flexbox AskedWhat are the flex properties (flex-grow, flex-shrink, flex-basis)?

Grid tracks and areas

Choose Grid or FlexboxGrid for two dimensions, Flexbox for one.

Fix one column and split the rest 1 to 2grid-template-columns: 200px 1fr 2fr

Draw the layout as named areasgrid-template-areas: "side main"grid-area: main

TrapPercentages ignore gap, so 20% 40% 40% plus a gap overflows. fr shares only what's left.

Asked in interviews

AskedWhat is CSS Grid and how does it differ from Flexbox?AskedWhat is the difference between fr unit and percentage in CSS Grid?AskedExplain grid-template-areas and how to use it

Subgrid and masonry

Line up titles across a row of cardsgrid-template-rows: subgrid

Pack items of mixed heightcolumn-count: 3break-inside: avoidItems read down each column.

Asked in interviews

AskedWhat is CSS Subgrid and how does it work?AskedHow do you implement a masonry layout with CSS?

Center, sticky footer, equal columns

Center a child on both axesdisplay: gridplace-items: center

Center an overlay such as a modaltransform: translate(-50%, -50%)Set top and left to 50% first.

TipFlex and grid items stretch to the tallest in their row, so columns match.

Asked in interviews

AskedHow do you center an element both horizontally and vertically?AskedHow do you create a sticky footer that stays at bottom?AskedHow do you create equal-height columns?

Responsive design

fit any screen, container and image

Media queries

Add styles from a width up, or up to it@media (min-width: 768px)Use max-width to build desktop first.

Name a breakpoint once@custom-media --sm (max-width: 30em);Needs PostCSS.

TipMobile first keeps base styles simple, and phones skip the wider blocks.

Asked in interviews

AskedWhat are media queries and how do you use them?AskedWhat is the difference between min-width and max-width in media queries?AskedHow do you implement CSS custom media queries?

Adaptive design and container queries

Tell responsive from adaptive designResponsive is one fluid layout. Adaptive is a few fixed ones.

Style a component by its container's widthcontainer-type: inline-size@container (min-width: 300px)

Asked in interviews

AskedWhat are CSS container queries and how do they work?AskedHow is responsive design different from adaptive design?

Viewport and units

Stop phones laying out the page 980px widewidth=device-width, initial-scale=1In the viewport meta tag.

Size text so it follows the user's settingsfont-size: 1.25remem uses the element's own font size.

Fill a phone screen under its toolbarheight: 100dvh100vh can run under it.

TipTo clear a notch, add viewport-fit=cover and pad with env(safe-area-inset-top).

Asked in interviews

AskedExplain the viewport meta tag and its importance AskedWhat are CSS units and when should you use each?AskedWhat are CSS environment variables and how do you use them?

clamp() and math functions

Keep a size between a minimum and a maximumclamp(1rem, 4vw, 2rem)Minimum, preferred, maximum.

Mix units in one valuecalc(100% - 40px)Spaces around + and - are required.

Place items around a circlecalc(cos(45deg) * 100px)

TrapKeep a font's clamp() maximum in rem and at least twice the minimum, or text stops growing when users zoom.

Asked in interviews

AskedWhat is the clamp() function and how is it useful for responsive design?AskedHow do CSS math functions work?AskedHow do you create responsive typography?

Responsive images

Stop an image overflowing its containermax-width: 100%height: auto

Let the browser pick a file for the screensrcset="a-400.jpg 400w, a-800.jpg 800w"sizes says how wide it shows.

Fill a frame without stretching the imageobject-fit: covercontain fits it all and may leave bands.

Asked in interviews

AskedHow do you make images responsive?AskedExplain the object-fit and object-position properties

Transitions & animations

change and move things smoothly

Transitions

Animate a change, such as a hovertransition: opacity 0.3s ease 0.1sThe first time is the duration, the second the delay.

Choose a transition or an animationA transition needs a trigger. An animation can run alone.

Traptransition: all also animates changes you didn't plan. Name each property.

Asked in interviews

AskedWhat is the difference between CSS transitions and animations?AskedExplain the CSS transition properties

Animations and scroll snap

Define the steps of an animationWrite @keyframes with from, to or percentages.

Run it forever, back and forthanimation: pulse 2s infinite alternate

Animate an element as it scrolls into viewanimation-timeline: view()Not in every browser yet.

Make a carousel settle on whole slidesscroll-snap-type: x mandatoryscroll-snap-align: start

TrapWithout animation-fill-mode: forwards, the element snaps back when the animation ends.

Asked in interviews

AskedWhat are CSS keyframes and how do you use them?AskedExplain the animation properties in CSS AskedHow do CSS scroll-snap properties work?

2D transforms and transform-origin

Move, turn and resize a boxtransform: rotate(45deg) scale(1.2)The boxes around it don't move.

Turn it around a corner, not its centertransform-origin: top left

TrapOrder matters. A translateX after rotate moves along the rotated axis.

Asked in interviews

AskedWhat are CSS transforms and what types are available?AskedWhat is the transform-origin property?

3D transforms and flip cards

Give 3D turns visible depthperspective: 1000pxSet it on the parent.

Flip a card on hoverbackface-visibility: hiddenTurn the wrapper with rotateY(180deg).

TrapTouch and keyboard users have no hover. Flip on :focus-within too.

Asked in interviews

AskedExplain 3D transforms and the perspective property AskedHow do you create a CSS-only flip card effect?

Theming, color & effects

variables, dark mode and visual effects

Custom properties and dark mode

Define a variable and read it with a fallback--brand: #07fcolor: var(--brand, black)

Let the browser theme controls and scrollbarscolor-scheme: light darkIt won't change colors you set.

Give one color per scheme in one linelight-dark(#333, #fff)

TrapA plain custom property can't animate smoothly. Register it with @property first.

Asked in interviews

AskedWhat are CSS custom properties (CSS variables) and how do you use them?AskedWhat is color-scheme and how does it work with dark mode?AskedWhat is the CSS light-dark() function?

Colors, gradients and paint worklets

Pick colors whose steps look evenoklch(70% 0.1 180)

Fill a background with a gradientlinear-gradient(red, blue)

Draw a background with JavaScriptbackground: paint(circle)Not in every browser.

Asked in interviews

AskedWhat are CSS gradients and how do you create them?AskedWhat are CSS color functions and color spaces?AskedWhat is the CSS Paint API and how does it work?

Filters, clip paths and masks

Blur an element, or shadow its visible pixelsfilter: blur(5px)drop-shadow() follows the pixels, not the box.

Cut an element to a shapeclip-path: circle(50%)

Fade an element out with a soft edgemask: linear-gradient(black, transparent)

Asked in interviews

AskedExplain CSS filters and their effects AskedWhat is the clip-path property and how do you use it?AskedHow do CSS masks work?

Performance

load fast and render cheaply

What a change costs

Animate at 60fpstransformopacityThey skip layout and paint.

Promote an element just before it animateswill-change: transformRemove it after. Each layer costs memory.

Avoid layout thrashingDon't read offsetHeight right after a style change.

Know how a browser matches a selectorRight to left, from the rightmost part up the ancestors.

Trapwill-change creates a stacking context before anything moves, which can change z-index.

Asked in interviews

AskedHow do you create smooth 60fps animations?AskedWhat are the performance implications of different CSS properties?AskedWhat is the will-change property and when should you use it?

Load fast, without layout shifts

Paint the first screen before the stylesheet arrivesInline the critical CSS, then load the rest without blocking.

Load several stylesheets at onceUse separate <link> tags, not chained @import.

Ship fewer bytes of CSSPurge unused rules, minify, compress, and split by route.

Show fallback text while a web font loadsfont-display: swapLoad the font with @font-face, as WOFF2.

Stop images shifting the layoutaspect-ratio: 16 / 9This keeps CLS low.

Keep layout and paint work inside a widgetcontain: content

TrapInlined CSS repeats in every page and can't be cached on its own.

Asked in interviews

AskedWhat is Critical CSS and how do you implement it?AskedHow do you use CSS @import and what are its limitations?AskedHow would you implement a design that uses non-standard fonts?

Architecture & tooling

keep styles in order as the code grows

BEM, OOCSS and Atomic CSS

Name classes the BEM way.card__title.card--featuredBlock, element, modifier.

Separate structure from skinOOCSS puts layout in one class and colors in another.

Style with one-property utility classesAtomic CSS, as in Tailwind's flex or p-2.

Avoid specificity fights in a big appOne class per selector, plus cascade layers.

Asked in interviews

AskedWhat is BEM methodology and how do you implement it?AskedExplain the OOCSS (Object-Oriented CSS) methodology AskedWhat is Atomic CSS and when would you use it?

Organize CSS at scale

Scope class names to one file at build timecard.module.cssCSS Modules. No runtime cost.

Drive styles from component propsCSS-in-JS. Runtime libraries add work on every render.

Order styles from generic to specificResets first and utilities last, as ITCSS does.

Name every design value once--color-actionSemantic names point at raw values.

Asked in interviews

AskedWhat are CSS modules and how do they work?AskedWhat is the difference between CSS-in-JS and traditional CSS?AskedHow do you organize CSS in large projects?

Preprocessors and native nesting

Know what Sass still addsMixins and loops, at the cost of a build step.

Nest rules without a build step&:hover { }

TrapNative nesting can't build names like Sass's &__title.

Asked in interviews

AskedWhat are the advantages and disadvantages of CSS preprocessors?AskedHow do CSS nesting rules work?

Browser support & debugging

ship new CSS safely, and find layout bugs

Feature detection and fallbacks

Use a feature only where it works@supports (display: grid)Add not for the fallback.

Give old browsers a fallback valuePut a safe value first. Browsers skip unknown values.

Choose progressive enhancement or graceful degradationBuild a base that works everywhere, then add to it.

Trap@supports proves the syntax parses, not that the feature works without bugs.

Asked in interviews

AskedHow do you use @supports for feature detection?AskedHow do you handle browser compatibility issues in CSS?AskedWhat is the difference between graceful degradation and progressive enhancement?

Vendor prefixes and new features

Add vendor prefixesLet Autoprefixer add them from your browserslist.

Check a feature before you ship itMDN's Baseline badge means every major browser has it.

TipA few properties still need a prefix, such as -webkit-line-clamp.

Asked in interviews

AskedWhat are vendor prefixes and are they still necessary?AskedWhat are the latest CSS features and how do you stay updated?

Test, lint and debug

Choose which browsers to testYour users' browsers, across Chromium, WebKit and Gecko.

See every box's edges* { outline: 1px solid red; }Unlike a border, it doesn't change the layout.

Lint your CSSnpx stylelint "**/*.css"

TrapEmulators miss real taps and real speed. Test on real phones too.

Asked in interviews

AskedHow do you test CSS across different browsers?AskedHow do you debug CSS layout issues?AskedWhat CSS linting rules should you follow?

Pro · $10/mo

This sheet stays free. With Pro, you can:

Every answer on this sheet. Read the full answer to all 110 questions it links, not just the 15 free ones.
My sheet. The cards you star and the ones you miss in Quiz me, from every sheet, on one page to quiz and print.
PDFs. Download this sheet and My sheet, laid out for A4, with every question a link to its answer.
The rest of Pro. Every answer in the question library, and 1,000 AI credits a month.

Get Pro or browse more free sheets

The model

Cascade & selectors

Which value wins

Resets and cascade layers

Selectors and combinators

Pseudo-classes and pseudo-elements

:is(), :where(), :not() and :has()

Box model & positioning

Box model and box-sizing

Margin, padding and collapsing

Display types and hiding

Size limits and overflow

Position and stacking

Flexbox & Grid

Flexbox axes and sizing

Grid tracks and areas

Subgrid and masonry

Center, sticky footer, equal columns

Responsive design

Media queries

Adaptive design and container queries

Viewport and units

clamp() and math functions

Responsive images

Transitions & animations

Transitions

Animations and scroll snap

2D transforms and transform-origin

3D transforms and flip cards

Theming, color & effects

Custom properties and dark mode

Colors, gradients and paint worklets

Filters, clip paths and masks

Forms, print & accessibility

Accessibility and CSS-only widgets

Form controls and validation

Print styles

Performance

What a change costs

Load fast, without layout shifts

Architecture & tooling

BEM, OOCSS and Atomic CSS

Organize CSS at scale

Preprocessors and native nesting

Browser support & debugging

Feature detection and fallbacks

Vendor prefixes and new features

Test, lint and debug

Frontend Development

Angular

GraphQL

HTML5

JavaScript

This sheet stays free. With Pro, you can: