CSS Reset

A CSS reset is a short stylesheet loaded before your own styles that removes or standardizes the browser's built-in default styles, such as margins on headings, list bullets and font sizes. Each browser ships a slightly different default stylesheet, so without a baseline the same page can look subtly different.

Why it matters

A reset gives designers a predictable starting point so their rules behave the same everywhere. Two approaches exist. A hard reset, like the classic Eric Meyer reset, zeroes nearly everything and makes you restyle every element. A normalize approach, like normalize.css, keeps useful defaults and only fixes inconsistencies. Modern minimal resets are often just a few lines. Frameworks such as Tailwind include their own base layer.

Example

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
img, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }

These rules make width calculations include padding, remove the default body margin, keep media from overflowing and make form controls inherit the page font.

Common mistakes

• Using a hard reset and forgetting to restore list markers or focus outlines.
• Loading the reset after other styles so it overrides them.
• Removing outline for focus without a replacement, harming keyboard accessibility.

Related

• Box model
• CSS
• Cross-browser compatibility
• CSS specificity

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.