CSS Reset — start every project with this

Remove default browser margins, set box-sizing: border-box on everything. The FIRST 4 lines of every CSS file.

style.css v3.1

style.css — the CSS rules

/* RESET — remove all default margins/padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base font + colors */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
  background: #f5f5f5;
}

/* Headings inherit line-height */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

/* Links */
a {
  color: #a0c000;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Lists — remove bullets by default */
ul, ol {
  list-style: none;
}

index.html — the HTML structure (what the CSS targets)

<h1>Page Title</h1>
<p>This page uses the CSS reset on the left. Without the reset, the browser
adds default margins to h1, p, ul, etc. — making every project look
slightly different.</p>
<h2>Why reset?</h2>
<ul>
  <li>Consistent starting point across browsers</li>
  <li>No surprise margins or paddings</li>
  <li>box-sizing: border-box makes layouts predictable</li>
</ul>
<a href="#">This is a link</a>

Live preview updates as you type

🧠 How it works

* { margin: 0; padding: 0; box-sizing: border-box; } is the most important line in CSS. It removes ALL default browser margins/paddings (which differ between Chrome, Firefox, Safari) and sets box-sizing: border-box so padding doesn't add to the element's width. Without border-box: a 200px box with 20px padding is actually 240px wide — breaks layouts. With border-box: 200px stays 200px, padding eats into the content area. Set a base font-family + size on body — everything inherits it. Remove list bullets (list-style: none) — you'll add them back selectively where needed.

✏️ Try these changes

Comment out the * { } block (wrap it in /* */)
→ all the default margins come back — h1 gets a big top margin, ul gets bullets
Change font-size: 16px to 14px
→ all text shrinks (inherited from body)
Change color: #1a1a1a to #666
→ all text becomes grey (inherited)
Add list-style: disc; to the ul, ol rule
→ bullets come back

← Previous lab

Cascade + specificity — which rule wins?

Next lab →

CSS Variables (custom properties) — :root