Default Browser Styles
Discover how browsers apply default styles to HTML elements — margins, fonts, colors, and how to understand the built-in styling.
Have you noticed that HTML elements look styled even without any CSS? That's because browsers apply default styles (also called "user agent styles") to every element.
What Are Default Styles?
Every browser has a built-in stylesheet that defines how elements look by default:
<h1>— Large, bold, with margin above and below<p>— Normal size with margin spacing<a>— Blue color, underlined<strong>— Bold text<em>— Italic text<ul>/<ol>— Bullet points / numbers with left padding
Seeing Default Styles
Open Chrome DevTools (F12 or right-click → Inspect), select an element, and look at the "Styles" panel. You'll see styles labeled "user agent stylesheet" — those are the browser defaults.
Default Margins and Padding
Many elements have built-in margins that create spacing:
/* Browser defaults for body */
body { margin: 8px; }
/* Browser defaults for h1 */
h1 { font-size: 2em; margin: 0.67em 0; font-weight: bold; }
/* Browser defaults for p */
p { margin: 1em 0; }CSS Reset
Because different browsers have slightly different defaults, developers often use a CSS reset to start with a clean slate:
* { margin: 0; padding: 0; box-sizing: border-box; }This removes all default margins and padding, giving you full control.
Key Takeaway
Default styles exist so HTML is readable even without CSS. But when you start adding your own CSS, understanding these defaults helps you avoid unexpected spacing and layout issues.