Default Browser Styles

Even before you write a single line of CSS, your HTML elements already have styles. These are called default browser styles (or user-agent styles).

What Are Default Styles?

Every browser ships with a built-in stylesheet that applies default styling to HTML elements. For example:

• <h1> elements are large and bold
• <p> elements have margin above and below
• <a> links are blue and underlined
• <ul> lists have bullet points and left padding

Viewing Default Styles

You can see these default styles in your browser's DevTools. Right-click any element, choose Inspect, and look at the Styles panel. You'll see styles labeled user agent stylesheet.

Why This Matters

Understanding default styles is important because:

• They explain why elements look a certain way before you add CSS
• Your CSS overrides these defaults
• Different browsers may have slightly different defaults

CSS Resets

Many developers use a CSS reset or normalize.css to strip away browser defaults and start with a clean slate:

/* A simple CSS reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

This ensures consistent styling across all browsers.