Browser defaults, inheritance and what a reset is for

Open a plain HTML page with no stylesheet at all. The heading is large and bold, the links are blue and underlined, there is a margin around everything, and the text is a serif font. You wrote none of that.

Every browser ships its own stylesheet, and understanding it answers most of the questions beginners ask in their first week.

The browser's stylesheet

It is real CSS, and you can read it — Chrome's is in the Elements panel under "user agent stylesheet" next to any property you did not write. Roughly:

h1     { font-size: 2em; margin: 0.67em 0; font-weight: bold; }
p      { margin: 1em 0; }
ul     { padding-left: 40px; margin: 1em 0; list-style: disc; }
a:link { color: -webkit-link; text-decoration: underline; }
body   { margin: 8px; }
button { font: 400 13.33px Arial; }      /* does NOT inherit your font */
table  { border-collapse: separate; border-spacing: 2px; }

Which explains, in order, the five questions everybody asks:

"Why is my h1 huge?" font-size: 2em — twice its parent. Not a fixed size, which is why an h1 inside a smaller container is smaller.

"Why is there a gap I did not add?" margin: 8px on body, plus margin: 1em 0 on every paragraph and heading. This is what a reset removes.

"Why do my two paragraphs have one gap, not two?" Adjacent vertical margins collapse — a 16px bottom margin next to a 16px top margin gives 16px, not 32. Vertical only, and only in normal flow; Flexbox and Grid do not collapse margins, which is one reason gap is easier.

"Why is my heading touching the top of its box?" The heading's own top margin escaped the box — margin collapsing again, through a parent with no padding or border.

"Why does my button ignore my font?" Form controls get their own font from the browser and do not inherit yours. You have to ask:

button, input, select, textarea {
  font: inherit;
}

That one rule is in every reset ever written, and without it your carefully chosen font stops at the edge of every form.

Inheritance

Some properties pass down to descendants. Most do not.

body {
  color: #222;              /* inherited — everything is #222 */
  font-family: system-ui;   /* inherited */
  border: 1px solid red;    /* NOT inherited — only body gets a border */
}

The rough rule: things about text inherit; things about boxes do not.

If a box property inherited, every nested div would draw its own border and you would need to switch it off constantly. The default is the useful one.

Set the text properties once on body — or on :root — and stop repeating them. That is the point.

Three keywords

.card {
  color: inherit;      /* take the parent's value, whatever it is */
  border: initial;     /* the property's own default, as defined by CSS */
  padding: unset;      /* inherit if inheritable, else initial */
}

inherit is the useful one day to day — font: inherit on buttons, color: inherit on a link you want to look like text.

revert is the one worth knowing about: it goes back to what the browser's stylesheet said, not to CSS's initial value. text-decoration: initial on a link gives none; text-decoration: revert gives the underline back.

background does not inherit, and usually does not need to

<div style="background: #eee">
  <p>This paragraph looks grey.</p>
</div>

It is not grey. Its background is transparent, which is the initial value, so the grey behind it shows through. That is why backgrounds appear to inherit — and why they stop appearing to the moment you set a background on the child.

Resets

Three approaches, and you should know which you are using.

No reset. Fine for a tiny page. You fight body { margin: 8px } and collapsing margins forever.

A full reset — the old approach, of which Eric Meyer's is the ancestor — sets almost everything to zero, including making all headings the same size as body text. It gives a clean slate, and it also throws away semantic defaults you then have to rebuild, including the visual distinction between heading levels.

A modern normalize-or-small-reset. What nearly everyone uses now. Eight or ten rules:

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

Every line is a fix for something in this lesson.

box-sizing: border-box is the important one and the next lesson explains it properly — it is the single most valuable line of CSS ever written.

* { margin: 0 } kills collapsing-margin surprises. You then add the margins you actually want, which is more work and entirely predictable.

img { display: block } removes a gap under every image that beginners chase for hours. An img is inline by default, so it sits on a text baseline and leaves room for descenders below it — about 4 pixels of mysterious space. display: block removes it.

max-width: 100% stops a wide image overflowing a phone, as in module 1.

font: inherit on form controls, as above.

overflow-wrap: break-word stops a long unbroken string — a URL, an email address — pushing the whole layout sideways.

Do not use * { padding: 0 } without thinking. It strips the indent from ul and ol, so your bullets sit outside their container and get clipped. If you want that, remove list-style too and do it deliberately on the lists you are styling.

Which font actually renders

body { font-family: "Inter", system-ui, sans-serif; }

That is a stack, tried left to right. "Inter" if the visitor has it or you loaded it; otherwise system-ui, which is the operating system's own UI font — San Francisco on a Mac, Roboto on Android, Segoe UI on Windows; otherwise any sans-serif.

system-ui is worth defaulting to: it is already on the device, so it costs zero bytes and renders instantly. The typography lesson covers loading a real font, and what it costs.

Always end with a generic family — sans-serif, serif, monospace. Without one, a visitor missing every named font gets the browser's default, which is usually Times New Roman.

Check your work

Why an unstyled h1 is huge. The browser's font-size: 2em — relative to its parent, not fixed.

Where the gap round your page comes from. body { margin: 8px }.

Why two paragraphs share one gap. Adjacent vertical margins collapse. Flexbox and Grid do not collapse.

Why a button ignores your font. Form controls do not inherit font. Fix with font: inherit.

The inheritance rule of thumb. Text properties inherit; box properties do not.

Why background seems to inherit. Children are transparent, so the parent shows through.

initial versus revert. CSS's default versus the browser's default — text-decoration: revert restores a link's underline.

Why img { display: block }. An inline image sits on a text baseline and leaves ~4px below it.

Why overflow-wrap: break-word. A long URL otherwise pushes the layout sideways.

Why not * { padding: 0 }. It strips list indentation and your bullets get clipped.

Why a font stack ends with a generic family. Otherwise the fallback is Times New Roman.

Practice

1. Open a page with no CSS. List ten things the browser styled for you.
2. Find the user agent stylesheet for an h1 in devtools and read the rule.
3. Put an h1 inside a container with font-size: 12px. Explain its size.
4. Put 16px bottom margin on one paragraph and 16px top on the next. Measure the gap.
5. Do the same inside a Flexbox container and measure again.
6. Set font-family on body and add a <button>. Then add font: inherit.
7. Set border: 1px solid red on body and check whether a nested div has one.
8. Set background: #eee on a parent and inspect the child's computed background-color.
9. Set text-decoration: initial on a link, then revert. Compare.
10. Put an image in a div with a coloured background and find the gap underneath. Fix it with display: block.
11. Put a 300-character unbroken string in a narrow box. Then add overflow-wrap: break-word.
12. Apply * { padding: 0 } to a page with a list and describe what breaks.
13. Write a font stack with a deliberately fake first font and confirm the fallback.
14. Type the small reset above into your own styles.css and keep it for the rest of the course.

Official documentation

• MDN — Inheritance — Which properties inherit, and what inherit, initial, unset and revert each do.
• WHATWG HTML — Rendering — The browser's default stylesheet, written out as the specification requires it.
• MDN — Mastering margin collapsing — The exact rules for when vertical margins collapse.

Next: selectors, and the specificity rules that decide who wins.