Browsers' default CSS for HTML elements

html

responsive-design

best-practices

css

byNikita Barsukov·Nov 5, 2024

Easily inspect HTML elements to check browser default CSS with developer tools:

Right-click on an element, select Inspect.
Navigate to the Styles pane to see User Agent Stylesheet defaults.

For consistent cross-browser styling, frameworks like Normalize.css are your friends.

/* Quick example of a reset using Normalize.css */
@import 'normalize.css'; /* Import normalize.css */
html {
  font-family: sans-serif; /* Override browser's default font, unless it's Comic Sans 😉 */
}

Remember: Use developer tools to peek defaults, and Normalize.css to enforce inconsistency.

Understanding browser stylesheets

Exploring browser stylesheet sources

Every browser has its own default stylesheet. These styles are your first line of rendering before your custom style sheet kicks in.

Chrome has Blink's html.css at its heart (View Source)
Firefox rocks it with Gecko's html.css (View Source)
Safari prefers WebKit's html.css (View Source)
Edge is all game with Blink's html.css thanks to Chromium (View Edge Source)
Internet Explorer also had its own defaults once upon a time (View IE Source)

Not all styles are born equal

Each of these sources conforms to the W3C specification but sprinkles some of their own flavor, resulting in minor inconsistencies. 'Tis these discrepancies that keep us engineers on our toes emoji.

The art of browser style normalization

Frameworks like HTML5 Boilerplate provide us with a "main.css" file loaded with rules to iron out these differences.

Normalize.css is another knight in shining armor doing the same job standalone:

@import 'normalize.css'; /* Consistency in rendering */
/* Commonly styled elements */
body, h1, h2, h3, p {
  margin: 0; /* Remove browser's generous margins */
}

CSS filters for an extra kick

CSS filters can be used to create visual effects like a grayscale, sepia, or blur. Tweak it, transform it, but don't forget to check browser compatibility. Can I Use is your compass here.

Practical use of default styles

Taming form elements

Want to harmonize the styling of form elements? Learn the onset styles and then set your own:

input, button, select, textarea {
  /* Custom styles that can outstyle any user agent*/
}

Aligning typography

Ensure parallelism in typography across headings (h1 to h6), paragraphs (p), and others:

body, h1, h2, h3, p {
  font-family: 'Your Font', sans-serif; /* Consistency is typegraphy's best friend */
}

Balancing the box model

Slight differences in box-sizing across browsers can play havoc with your layouts. Reset box-sizing:

*, *:before, *:after {
  box-sizing: border-box; /* No more box-sizing surprises! */
}

Revealing invisible elements

Some elements can be elusive. When you don’t see an audio elements without controls, remember, browser defaults still dictate.

audio:not([controls]) {
  display: none; /* Invisible audio is just not your type */
}

explain-codes / Html / Browsers' default CSS for HTML elements

Linked

How to create a <style> tag with Javascript?



What's default HTML/CSS link color?



How to style HTML5 range input to have different color before and after slider?



What are the most common font-sizes for H1-H6 tags



How to dynamically create CSS class in JavaScript and apply?



White space visible on right side of page when background image should extend full length of page



Stretch background image CSS?



Understanding browser stylesheets Practical use of default styles