Universal selector styles

The following settings apply to every element. The universal selector * has a low specificity of 0,0,0,0 and is easy to override. Any other selector is more specific than the * selector.

In a visual design to be built, the spacings of paragraphs, headings and other elements are always custom and not the browser default. Resetting this makes creating a new vertical rhythm easier.

It also easily shows what elements don't have a vertical rhythm yet.

* {
  margin: 0;
  padding: 0;
}

Border-box for intuitive widths

Apply a natural box layout model to all elements, but allowing components to change.

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

Global styling

The global styling is set on the html element. This is because:

• html is the root element and has body as a child.
• rem refers to the font size defined on the html element.

Improve readability with font smoothing.

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Add the correct display for main up to and including IE 11.

main { display: block; }

Add the correct display in IE 10+.

template { display: none; }

Add the correct display in IE 10.

[hidden] { display: none; }

Normalize all headings

All the headings have by default a divergent font size from the font size set on html.

Sets the font size of all headings the same and slightly bigger than the default text. This allows for styling all headings easily with classes instead of the headings itself.

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

Don't forget to set the correct font weights for b, strong, headings to prevent faux bold.

Form elements

Some form elements do not inherit the font size or font family.

button, input, textarea, select {
  font-size: 100%;
}

button, input, select, textarea {
  font-family: inherit;
}

The color set on html isn't inherited by default by button, input, select and textarea.

button, input, select, textarea {
  color: inherit;
}