Table of Contents
Your CSS reset rules don't have to be a mile long, and most modern browsers are now pretty uniform with their base layout. Below you'll find what I judge to be a good minimal effective dose for a reset. Just copy it in your new projects and you'll be up and running.
🔖 Bookmark this page for a quick & easy reference
Here's the CSS reset:
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
font-weight: normal;
}
ol, ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
A few things to note
- As you can see, I've included a rule so that images are responsive by default.
- Arguably the most important part of this CSS reset is the
box-sizing: border-box, as this will ensure consistent and predictable sizing. The default value of <^>content-box<^> doesn't account for the padding or border.
- You can remove the rule for <^>ol<^> and <^>ul<^> if you want to keep the default bullet points for your lists.
- With
font-weight: normalheadings won't be bolded by default. Remove that if you don't mind the default look.
- I've set the default font size to be 16px. Everything else can be specified in <^>rem<^> units and it will be based off of that 16px. Then, if you want to adjust globally to make the text a little larger overall, you can change the base rule for something like 17 or 18px.
🙈 Think something is missing? Get [in touch here](/contact/) to let us know!
