Last updated
Reset Philosophy Comparison
- Eric Meyer Reset: removes everything — maximum control, requires styling everything from scratch
- Normalize.css: fixes inconsistencies while preserving useful defaults — less work to re-style
- Modern Reset: targeted fixes for common issues — minimal, practical, recommended for new projects
- Minimal Reset: only the absolute essentials — for projects using a CSS framework that handles the rest
The CSS Reset Generator on TechConverter.me creates customized resets based on your project's needs. Choose your reset philosophy, select which elements to include, and get a production-ready reset stylesheet with explanatory comments.
Examples
Example 1: Modern CSS Reset (Recommended)
/* Modern CSS Reset — targeted, minimal, practical */
/* Box sizing */
*, *::before, *::after {
box-sizing: border-box;
}
/* Remove default margins */
* {
margin: 0;
}
/* Improve text rendering */
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* Remove built-in form typography styles */
input, button, textarea, select {
font: inherit;
}
/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* Improve line wrapping */
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
/* Create a root stacking context */
#root, #__next {
isolation: isolate;
}
Example 2: Full Eric Meyer Reset
/* Eric Meyer's CSS Reset v2.0 — removes all browser defaults */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
table {
border-collapse: collapse;
border-spacing: 0;
}
Example 3: Normalize.css Approach
/* Normalize.css — preserves useful defaults, fixes inconsistencies */
/* Correct line height in all browsers */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
/* Remove the margin in all browsers */
body { margin: 0; }
/* Render the main element consistently in IE */
main { display: block; }
/* Correct font size and margin on h1 elements */
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Add correct box sizing in Firefox */
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
/* Correct inheritance and scaling of font size in all browsers */
pre {
font-family: monospace, monospace;
font-size: 1em;
}
/* Remove the gray background on active links in IE 10 */
a { background-color: transparent; }
/* Add correct font weight in Chrome, Edge, and Safari */
b, strong { font-weight: bolder; }
/* Correct font size in all browsers */
small { font-size: 80%; }
/* Prevent sub and sup from affecting line height */
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }