A truly simple CSS reset

July 21, 2019
I'm making an alternative to DevTools. Click here to check it out.

This is the short, simple CSS reset that powers nearly all of my sites (500,000+ pageviews). Just add it at the very top of your CSS. It’s un-opinionated and easy to read, making it perfect for starting new projects or doing redesigns.

* {
  margin: 0;
	padding: 0;
	box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

input,
textarea,
button {
  font-size: 1rem;
  padding: 1rem;
}

img {
	max-width: 100%;
}

CSS reset details

Make sure this goes at the top of your CSS so you can overwrite its values below.

* is the “everything” selector. This resets the margins and padding of every element to 0, allowing you to set them explicitly in other areas of your CSS. Here, we also set box-sizing to border-box, which is a fairly common CSS practice that makes your element sizing more predictable, and we modify the font-smoothing properties to remove jagged edges from fonts.

For the html selector, we use system fonts – beautiful fonts that are used in the UI of your operating system and load immediately with no extra network resources. We also default to a font-size of 18px (which also sets the value of rem) and adjust the line-height to make the text more readable.

We set the font-size of inputs, textareas, and buttons to 1rem which will be calculated to be 18px, or whatever you set the font-size of your html selector to. We also give them some padding.

Finally, we make sure that images don’t overflow the page.

Pairs nicely with

This reset works great alongside my HTML5 skeleton.