Default Browser Styles
Understand how browsers apply default styles to HTML elements and why pages look the way they do without CSS.
Default Browser Styles
Have you noticed that HTML elements already have some styling even without writing any CSS? That's because every browser comes with a built-in stylesheet called the user agent stylesheet.
What Are Default Browser Styles?
Browsers apply a default set of styles to all HTML elements. For example:
<h1>appears large and bold<p>has margins above and below<a>appears blue with an underline<ul>has bullet points and padding<strong>appears bold
Common Default Styles
| Element | Default Style |
|---|---|
<h1> | font-size: 2em; font-weight: bold; margin: 0.67em 0 |
<p> | margin: 1em 0 |
<a> | color: blue; text-decoration: underline; cursor: pointer |
<ul> | list-style-type: disc; padding-left: 40px |
<body> | margin: 8px |
<strong> | font-weight: bold |
<em> | font-style: italic |
Why Do Default Styles Exist?
Without default styles, all HTML elements would look identical — just plain text. Default styles ensure that even an unstyled HTML page is readable and navigable.
The Problem: Browser Inconsistency
Different browsers have slightly different default styles. This can cause your page to look different in Chrome vs Firefox vs Safari. To solve this, developers often use:
- CSS Reset — strips all default styles, giving you a blank slate
- Normalize.css — makes default styles consistent across browsers
Viewing Default Styles
You can see the default styles applied to any element using your browser's Developer Tools:
- Right-click any element on a web page
- Select "Inspect" (or press
F12) - Look at the Styles panel — scroll down to find "user agent stylesheet"
Key Takeaways
- Browsers apply default styles to all HTML elements
- These styles make unstyled HTML readable
- Different browsers may apply slightly different defaults
- You can override default styles with your own CSS
- Use Developer Tools (F12) to inspect default styles