Format a CSS Reset Stylesheet

Every browser ships with a default stylesheet (the user-agent stylesheet) that gives HTML elements their familiar default appearance: headings are bold and large, paragraphs have margins, lists have bullets, and links are blue and underlined. These defaults vary subtly between browsers, which is why the same HTML looks slightly different in Chrome vs Firefox vs Safari without any custom CSS. A CSS reset is a small stylesheet that overrides these defaults to create a consistent baseline. Modern resets are very different from the aggressive resets of the early 2000s (like Eric Meyer's CSS Reset) that zeroed out every conceivable browser style, often causing more problems than they solved. Today's approach, exemplified by Josh W. Comeau's modern reset and Andy Bell's "A (more) modern CSS reset," targets only the specific defaults that cause cross-browser inconsistencies or that modern development patterns need to override universally. This example covers the most impactful reset rules: *, *::before, *::after { box-sizing: border-box } changes the box model so that padding and border are included in an element's declared width — without this, a 300px element with 20px padding is actually 340px wide, which breaks grid and flex layouts. margin: 0; padding: 0 removes the default spacing that browsers apply to headings, paragraphs, and lists, giving you a clean starting point. The body rules set min-height: 100vh (so even short pages fill the viewport), line-height: 1.5 (a comfortable reading line height), and -webkit-font-smoothing: antialiased (for crisper text rendering on macOS and iOS). img, picture, video, canvas, svg { display: block } prevents the mysterious one or two pixel gap below inline media elements that caused endless confusion. input, button, textarea, select { font: inherit } ensures form elements use the same font as the surrounding text rather than browser-default system fonts. When to skip the reset: if you're using a CSS framework like Tailwind CSS or Bootstrap, they include their own reset (Tailwind uses Preflight, Bootstrap uses Reboot) and adding your own reset on top creates conflicts. Only add a custom reset to projects where you're writing CSS from scratch. Tips: place the reset at the very beginning of your CSS, before any component styles. Consider whether your reset should include list-style: none globally — this is useful for navigation lists but means you need to explicitly re-add bullets to content lists, which can be easy to forget.

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; line-height: 1.5; font-family: system-ui, sans-serif; -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; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }