Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference between resetting and normalizing CSS?
Developers want HTML elements to look the same across all browsers. However, each browser applies its own default styles to HTML elements, which can cause inconsistencies. For example, heading tags may have different sizes, fonts, margins, or padding depending on the browser used.
This tutorial explains CSS resetting and normalizing techniques, and the key differences between them.
What is CSS Resetting?
CSS resetting is a technique that removes all default browser styles by setting them to null or uniform values. This approach ensures a completely clean slate for styling, eliminating cross-browser inconsistencies caused by different user agent stylesheets.
Example: CSS Reset
Here's how CSS reset works by removing default browser styles
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS Reset - removes all default styles */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
h1, h2, h3, h4 {
font-weight: normal;
font-size: 1em;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This paragraph has no default margins or styles.</p>
</body>
</html>
All headings appear with the same size and weight as regular text. No default margins, padding, or styling is visible. All elements look identical across browsers.
What is CSS Normalizing?
CSS normalizing preserves useful default styles while making them consistent across browsers. Instead of removing all styles, it corrects known browser inconsistencies and bugs while maintaining sensible defaults.
Example: CSS Normalize
Here's how normalizing works by preserving useful defaults
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
<p>This paragraph retains useful default styling while being consistent across browsers.</p>
<ul>
<li>List items maintain their bullets</li>
<li>Default spacing is preserved</li>
</ul>
</body>
</html>
Headings display with appropriate size hierarchy (h1 largest, h2 medium, h3 smaller). Paragraphs have natural spacing, and list items show bullets. The styling looks consistent across all browsers while maintaining readability.
Key Differences
| Aspect | CSS Reset | CSS Normalize |
|---|---|---|
| Approach | Removes all default styles | Preserves useful defaults, fixes inconsistencies |
| File Size | Smaller | Larger but more comprehensive |
| Development Time | Requires styling everything from scratch | Faster development with sensible defaults |
| Use Case | Complete design control needed | Rapid development with cross-browser consistency |
Conclusion
Both CSS reset and normalize solve cross-browser styling issues but take different approaches. Reset gives you complete control by removing all defaults, while normalize provides a more practical solution by preserving useful styles and fixing inconsistencies.
4K+ Views
