No Login Data Private Local Save

User Agent Style Sheet Explorer - Online See Default CSS

25
0
0
0

User Agent Style Sheet Explorer

Explore default CSS applied by browsers to HTML elements — understand the cascade starting point.

Chromium Firefox Safari
All Elements Headings Text & Inline Lists Tables Forms Media Semantic Interactive
Default UA Stylesheet CSS
h1 { display: block; font-size: 2em; font-weight: bold; margin-block-start: 0.67em; margin-block-end: 0.67em; }
Note: These styles come from the browser's internal UA stylesheet. Exact values may vary slightly between browser engines. Displayed: Chromium (Blink) defaults.
Live Preview (UA styles only)
h1

The preview renders inside a sandboxed iframe with zero author CSS — only the browser's User Agent styles apply.

Frequently Asked Questions

What is a User Agent Style Sheet?
A User Agent Style Sheet (UA stylesheet) is the default CSS that every browser applies to HTML elements before any author or user styles. It's built into the browser engine (Blink for Chrome/Edge, Gecko for Firefox, WebKit for Safari). This is why an <h1> appears large and bold, <ul> has bullet points and left padding, and <a> links are blue and underlined — even when you write zero CSS. The UA stylesheet forms the base layer of the CSS cascade.
Why do browsers have default CSS for HTML elements?
Browsers include default styles to ensure that unstyled HTML documents are still readable and navigable. Without UA stylesheets, all text would render in a single undifferentiated flow — no headings, no list markers, no table structure, no form control appearance. The defaults provide a reasonable visual hierarchy out of the box. They also ensure backward compatibility: an HTML page from 1995 should still render sensibly in a modern browser.
How do User Agent styles differ between Chrome, Firefox, and Safari?
While the core UA styles are largely consistent (based on the HTML Living Standard), there are notable differences between browser engines:
  • Form elements: <button>, <input>, and <select> vary significantly — Firefox uses a distinct 3D border style, Chrome applies its own rounded native look, and Safari uses the macOS aqua theme.
  • Focus outlines: Chrome uses a blue glow, Firefox uses a dotted outline, Safari uses a subtle blue ring.
  • Margin/padding defaults: Slight variations exist in <body> margin (usually 8px across all), <pre> formatting, and <hr> border styles.
  • Table cell spacing: The default border-spacing may be 2px (most) or 1px (older engines).
How can I override or reset User Agent styles?
There are three common approaches to normalize or reset UA styles:
  1. CSS Reset (e.g., Eric Meyer's Reset): Aggressively zeroes out margins, padding, font sizes, and list styles on all elements — then you rebuild everything from scratch.
  2. Normalize.css: Preserves useful defaults while fixing cross-browser inconsistencies. It makes elements render consistently without stripping away sensible defaults.
  3. Custom Resets: Many developers apply minimal resets like *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } and then selectively style elements.
Any author CSS you write automatically overrides UA styles because author stylesheets have higher cascade priority than UA stylesheets.
Where can I view the actual UA stylesheet source code?
All major browser engines are open-source, and their UA stylesheets are publicly available: These files reveal the exact default CSS rules the browser ships with. They're an invaluable reference for understanding the cascade.
Does the UA stylesheet affect CSS specificity calculations?
No. UA stylesheets have the lowest priority in the CSS cascade. The cascade order (from lowest to highest priority) is: User Agent styles → User styles → Author styles → Author !important → User !important → UA !important. This means any CSS rule you write in your own stylesheet will override the UA default, even if your selector has the same specificity. UA styles only apply when no other rule matches an element for a given property.
🔧 Related Tools