CSS Reset 2024

A collection of various CSS rules and tips to ensure a clean base for your styling.

Included CSS rules come from the following sources:

• «My CSS Resets» from Keith J. Grant
• «Under the radar CSS features for your CSS reset» from Kevin Powell
• «A better image reset for your CSS» Kevin Powell

---

Get it here (minified)

For Explanations and Comments see the Unminified Source File

*,*:after,*:before{box-sizing:border-box}*{margin:0;padding:0;font:inherit}html{color-scheme:dark light}body{margin:unset}body{min-height:100vh;min-height:100svh}picture,svg,video,canvas{display:block;max-inline-size:100%;max-width:100%;block-size:auto}img{font-style:italic;background-repeat:no-repeat;background-size:cover;shape-margin:1rem;max-width:100%;height:auto;vertical-align:middle}h1,h2,h3,h4,h5,h6{text-wrap:balance}p{max-width:75ch;text-wrap:pretty}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media (prefers-reduced-motion: no-preference){:has(:target){scroll-behavior:smooth;scroll-padding-top:2rem}}html{hanging-punctuation:first last}

Contributing

If you spot a bug or want to add a new rule, feel free to send me a pull request!