# Normalize.css — Modern CSS Reset for Consistent Cross-Browser Rendering

> A small CSS file that normalizes default browser styles, providing a consistent baseline across browsers without stripping useful defaults.

## Install

Save as a script file and run:

# Normalize.css — Modern CSS Reset for Consistent Cross-Browser Rendering

## Quick Use
```bash
npm install normalize.css
# In your CSS or JS entry:
# @import 'normalize.css';
# Or CDN: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
```

## Introduction
Normalize.css fixes inconsistencies in default element styling across browsers. Unlike a traditional CSS reset that strips all styles to zero, Normalize.css preserves useful defaults and only corrects the parts where browsers disagree, resulting in a sane starting point for any project.

## What Normalize.css Does
- Corrects display and box-sizing inconsistencies for HTML5 elements
- Normalizes default typography, margins, and padding across browsers
- Fixes rendering bugs in form elements (inputs, buttons, selects) across engines
- Preserves useful browser defaults rather than zeroing everything out
- Provides inline documentation explaining each rule and the bug it addresses

## Architecture Overview
Normalize.css is a single CSS file of about 300 lines organized by element category: document, sections, grouping content, text-level semantics, embedded content, forms, and interactive elements. Each rule targets a specific cross-browser inconsistency and includes a comment citing the affected browser. It applies minimal overrides so downstream styles can build on a predictable base.

## Self-Hosting & Configuration
- Include via npm, CDN, or copy the CSS file directly into your project
- Load it as the very first stylesheet before any other CSS
- Safe to use alongside CSS frameworks — many frameworks already bundle it internally
- Customize by forking the file and removing sections you do not need
- Pairs well with a complementary box-sizing reset (`*, *::before, *::after { box-sizing: border-box; }`)

## Key Features
- Extremely small file size (under 8 KB unminified)
- Battle-tested across Chrome, Firefox, Safari, and Edge
- Preserves accessibility defaults for focus outlines and form elements
- Thoroughly commented source explaining every rule
- No dependencies — a plain CSS file with no build step required

## Comparison with Similar Tools
- **CSS Reset (Eric Meyer)** — strips all defaults aggressively; Normalize.css keeps useful ones
- **sanitize.css** — opinionated extension of Normalize.css with additional best-practice defaults
- **modern-normalize** — slimmed-down fork targeting only modern browsers
- **Tailwind Preflight** — Tailwind's built-in reset based on modern-normalize with extra opinionated resets
- **Reboot (Bootstrap)** — Bootstrap's reset layer, itself built on Normalize.css

## FAQ
**Q: Should I use Normalize.css or a CSS reset?**
A: Normalize.css is preferred when you want consistent defaults without losing useful browser styles. A full reset is better if you plan to define every style from scratch.

**Q: Does it conflict with Tailwind CSS or Bootstrap?**
A: Both frameworks include their own normalization layer. If you use them, you typically do not need to add Normalize.css separately.

**Q: Is it still maintained?**
A: The core library is stable. Cross-browser bugs have converged enough that updates are infrequent, but the project remains the reference standard.

**Q: How do I include it in a React or Vue project?**
A: Install via npm and import it in your entry file before any other styles.

## Sources
- https://github.com/necolas/normalize.css
- https://necolas.github.io/normalize.css/

---
Source: https://tokrepo.com/en/workflows/17d91fc8-41cf-11f1-9bc6-00163e2b0d79
Author: Script Depot