{"slug": "css-reset-by-kevin-powell-css", "title": "CSS: Reset by Kevin Powell.css", "summary": "Kevin Powell's CSS reset is a modern stylesheet that normalizes default browser styling by removing margins and padding, setting box-sizing to border-box for all elements, and establishing responsive media defaults. It also includes accessibility features like a dark color scheme preference, balanced text wrapping for headings, and smooth scrolling for targeted sections when the user hasn't disabled motion. The reset is designed to provide a clean, consistent foundation for web development projects.", "body_md": "CSS: Reset by Kevin Powell.css\n\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \nLearn more about bidirectional Unicode characters\n\n \n    Show hidden characters\n\n/* \n\n*   Kevin Powell\n\n*   https://youtu.be/cCAtD_BAHNw \n\n*/\n\n*, *::before, *::after {\n\n  box-sizing: border-box;\n\n}\n\n* {\n\n  margin: 0;\n\n  padding: 0;\n\n  font: inherit; /* Get rid of all font sizes and heights */\n\n}\n\nhtml {\n\n  color-scheme: dark light; /* Default dark */\n\n  hanging-punctuation: first last; /* Not supported in Chrome */\n\n}\n\nbody {\n\n  min-height: 100vh;\n\n}\n\n/* Media responsive */\n\nimg, picture, svg, video {\n\n  display: block;\n\n  max-width: 100%;\n\n}\n\nh1, h2, h3, h4, h5, h6 {\n\n  text-wrap: balance;\n\n}\n\np {\n\n  max-width: 75ch;\n\n  text-wrap: pretty; /* Prevents orphans on lines */\n\n}\n\n@media (prefers-reduced-motion: no-preference) {\n\n  :has(:target) {\n\n    scroll-behavior: smooth;\n\n    scroll-padding-top: 3rem;\n\n  }\n\n}", "url": "https://wpnews.pro/news/css-reset-by-kevin-powell-css", "canonical_source": "https://gist.github.com/Lego2012/7b7956734f2ab4a95fd0c311cd8bbe95", "published_at": "2024-01-05 19:53:29+00:00", "updated_at": "2026-05-24 07:20:18.640604+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Kevin Powell"], "alternates": {"html": "https://wpnews.pro/news/css-reset-by-kevin-powell-css", "markdown": "https://wpnews.pro/news/css-reset-by-kevin-powell-css.md", "text": "https://wpnews.pro/news/css-reset-by-kevin-powell-css.txt", "jsonld": "https://wpnews.pro/news/css-reset-by-kevin-powell-css.jsonld"}}