Menu
← All posts

Default browser stylesheets

· CSS, Browsers

First appeared on mobifreaks.com · Updated

Ever wondered why an h1 is big and bold, or why body has a margin, before you have written any CSS? Every browser ships its own default stylesheet, called the user agent stylesheet.

In 2012 I pointed to iecss.com, which collected the default stylesheets of IE 6 to 9, Firefox 3.6, WebKit and Opera 10.5, with a comparison table for the IE versions. Those browsers are long gone, but the defaults still matter: they are the reason CSS resets exist.

Where to read them today

Today there are three engines, and each publishes its stylesheet in its source code:

  • Chromium (Chrome, Edge, Opera, Brave): html.css in the Blink source, under third_party/blink/renderer/core/html/resources/.
  • Firefox (Gecko): html.css under layout/style/res/.
  • Safari (WebKit): html.css under Source/WebCore/css/.

The HTML standard also has a Rendering section describing the styles browsers are expected to apply, so the three are much closer than they were in 2012.

See them in DevTools

The quickest way is the browser itself:

  1. Right-click an element and choose Inspect.
  2. In the Styles panel, scroll down. Rules marked user agent stylesheet (Chrome, Edge) or listed as browser styles (Firefox, Safari) come from the default stylesheet.

That tells you exactly what you are overriding, and whether you need a reset at all.