What Are Browser Default Styles?

Every web browser comes with a built-in stylesheet called the user agent stylesheet. These default styles ensure that HTML elements have a basic visual presentation even when no CSS is written.

For example, without writing any CSS:

h1 elements are large and bold
p elements have top and bottom margins
a tags are blue and underlined
ul and ol have left padding and bullet points
body has a small margin (usually 8px)

The Cross-Browser Problem

The issue is that different browsers have slightly different default styles. Chrome, Firefox, Safari, and Edge each apply their own user agent stylesheet, which leads to inconsistencies.

Common differences include:

Default margins on body, headings, and paragraphs
Font sizes for headings
Padding on lists
Border styles on tables
Line heights across elements
Form element styling

These differences can cause your website to look slightly different across browsers, even with the same CSS.

What is a CSS Reset?

A CSS reset is a set of CSS rules that removes or normalizes all default browser styles. It gives you a clean, consistent starting point across all browsers.

The Classic CSS Reset

The original CSS reset by Eric Meyer strips all default margins, padding, and other properties:

CSS

/* Eric Meyer's CSS Reset (simplified) */
html, body, div, span, h1, h2, h3, h4, h5, h6,
p, blockquote, a, img, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, footer, header, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

The Universal Reset

A simpler but effective approach:

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This targets every element using the universal selector and resets the most common inconsistencies.

Normalize.css vs CSS Reset

While a CSS reset removes all default styles, Normalize.css takes a different approach — it preserves useful defaults and only corrects inconsistencies.

Key Differences

CSS Reset: Removes ALL default styles — you rebuild everything from scratch
Normalize.css: Keeps useful defaults — only fixes cross-browser inconsistencies

CSS

/* Reset approach: h1 looks like any other text */
h1 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; }

/* Normalize approach: h1 is still styled, just consistent */
h1 { font-size: 2em; margin: 0.67em 0; }

A Modern CSS Reset

Here is a practical modern CSS reset that combines the best of both approaches:

CSS

/* Box sizing for all elements */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margins */
body, h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

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

/* Remove list styles on elements with a role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

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

/* Inherit fonts for form elements */
input, button, textarea, select {
  font: inherit;
}

/* Remove text decoration from links */
a {
  text-decoration-skip-ink: auto;
}

The box-sizing Reset

One of the most important resets is box-sizing: border-box. By default, CSS uses content-box, where width and height only apply to the content — padding and borders are added on top.

CSS

/* Without reset: 300px + 20px padding + 2px border = 344px total */
.box {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

/* With border-box: total width stays 300px */
*, *::before, *::after {
  box-sizing: border-box;
}

border-box makes sizing much more intuitive and is considered essential for modern CSS development.

How to Use a CSS Reset

Option 1: Inline in Your Stylesheet

Place your reset at the very top of your main CSS file, before any other styles:

CSS

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p { margin: 0; }

/* === YOUR STYLES === */
body { font-family: Arial, sans-serif; }

Option 2: Separate Reset File

Create a dedicated reset file and link it before your main stylesheet:

HTML

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">

Summary

Browser default styles create inconsistencies across different browsers. A CSS reset removes all defaults for a clean slate, while Normalize.css preserves useful defaults and fixes inconsistencies. Modern CSS resets combine both approaches with essentials like box-sizing: border-box, margin removal, and responsive media defaults. Always place your reset at the top of your stylesheet before any custom styles.