While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the āreport an issueā button at the bottom of the tutorial.
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
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;
}
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.font-weight: normal
headings wonāt be bolded by default. Remove that if you donāt mind the default look.š Think something is missing? Get in touch here to let us know!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.