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.
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
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
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.
html selector, we use system fonts – some nice fonts that’re used in the UI of your operating system and load immediately with no extra network resources. We also default to a
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.