Detailed explanation
Browsers apply a built-in stylesheet, called the user-agent stylesheet, even when you write no CSS. It gives headings larger text, paragraphs margins, lists markers and indentation, and form controls their initial appearance. Many defaults are similar across browsers, but some differ by browser, operating system, or element. A CSS reset or normalize.css provides a more predictable baseline before you add your site's styles, reducing unexpected spacing and making layout decisions easier to control.
A CSS reset deliberately removes a broad set of default styles so you can define them yourself. Its scope depends on the implementation: a minimal reset might only remove margins and padding, while a larger one might also reset heading sizes, list markers, and borders. In the given example, `*, *::before, *::after` targets all elements and their generated pseudo-elements. Setting `margin: 0` and `padding: 0` removes their default spacing. Setting `box-sizing: border-box` makes declared widths and heights include padding and borders, which simplifies sizing. It does not include margins. The image rule makes images and picture containers block-level and limits their width to their containing block; `height: auto` is commonly added for responsive images.
normalize.css takes a more selective approach. It preserves useful defaults while correcting browser inconsistencies and known styling issues, including some involving forms, text, and embedded content. Unlike a broad reset, it does not intentionally make every heading, list, and paragraph visually unstyled. Its exact rules and supported browsers depend on the version. Neither approach changes HTML semantics, and neither guarantees identical rendering across all platforms: fonts, native controls, and your own CSS still matter.
Typically, load your baseline stylesheet before component and page styles so later rules can override it through the cascade. Choose a reset when your design defines most element styling explicitly; choose normalization when you want to retain sensible browser defaults. Interviewers mainly expect you to explain that trade-off, understand the example's actual scope, and recognise that removing defaults means restoring important spacing and accessible interaction cues yourself.
Key points to remember
- User-agent stylesheets provide default element styling before author CSS is applied.
- A reset removes selected defaults; how much it removes depends on its rules.
- normalize.css preserves useful defaults while addressing browser inconsistencies.
- `border-box` includes padding and borders within declared dimensions, but not margins.
- Load baseline styles before application styles, and choose an approach suited to the design.
Common mistakes candidates make
- Claiming every reset removes all browser styles; the supplied example does not remove list markers or reset heading sizes.
- Saying normalize.css guarantees pixel-identical rendering across browsers and operating systems.
- Removing defaults without restoring readable spacing or visible keyboard-focus indicators.
Likely follow-up questions
Does setting margin and padding to zero remove list bullets?
No; list markers are controlled by `list-style`, not margin or padding. Removing indentation can move markers into unexpected positions, so style lists deliberately.
Why include `*::before` and `*::after` in a reset?
The universal selector alone does not select pseudo-elements. Including these selectors applies the same sizing and spacing rules to generated content, which may otherwise use a different box-sizing model.
Should I use both a reset and normalize.css?
Usually, choose one baseline rather than combining them without a reason. A broad reset can undo defaults that normalize.css preserves, though a carefully chosen set of additional base rules can complement normalization.
Interview tip: Start with browser defaults, contrast removal with preservation, and explain one concrete rule from the example.