Difference between resetting and normalizing CSS?
Developers want HTML elements to look the same on every browser, although this depends on the capabilities of each browser. When a browser renders an HTML page, it applies its own default styles. For example, the size and font of the title tag vary depending on the type of browser. This means that titles can have margins or extra padding without requiring you to write code.
In this tutorial, we are going to have a look at how we can reset and normalize CSS and what is the difference between them.
Difference between normalizing and resetting?
When using CSS, developers may encounter some problems, such as different title fonts and sizes in different browsers. The top and bottom margins may be different, as well as the default padding. This is where reset and normalization come into play, making default CSS more consistent across browsers, but the debate over which method to use is still ongoing. Let's take a closer look at reset and normalization to determine the difference between them.
Reset style in CSS
To avoid cross-browser differences, in this technique, CSS authors null all the styles of the browser by using CSS reset. Different browsers will have their own different user agent stylesheet; to make the websites look more legible. For example, you might have seen hyperlinks in most of the browsers are blue, and visited hyperlinks appear purple in color.
An example of default styles can be −
font-weight: bold; font-size: 10px;
These default styles apply to all browsers, although the browser decides which style to apply. Some browsers may apply additional padding, some may change margins, and some may even have different font styles.
CSS reset will force the browser to reset all styles to null, thus avoiding differences due to the browser's default styles.
Let’s look at the example where we set the weight and style of all the elements as same.
font-weight: inherit; font-style: inherit; font-family: inherit;
CSS developers find inconsistencies, as their websites look different in different browsers. The reset helps the default browser styles to be set to null and this eliminates the inconsistencies that might occur due to different browser styles.
Note - Internet Explorer does not support the inherit attribute, which is why inherited values are not applied and can affect the user interface on Internet Explorer. Resetting will help us solve this problem when using Internet Explorer.
Example
Let's look at an example demonstrating how to reset the default browser style.
<!DOCTYPE html> <html lang="en"> <head> <title>Example of resetting!!</title> </head> <body> <h1>Hi welcome to another tutorial</h1> <h3>How is your day going?</h3> <h2>We Are learning how to Reset CSS</h2> <h4>It will reset the default CSS by the browser</h4> </body> </html>
The link that we imported will reset the default styles of the browser. The reset styles load before other styles and this leads to the removal of the browser’s default styles.
The above output will look the same on every browser as we used the reset in the code. The difference in the output will be minimal after using the reset.
Normalizing in CSS
To improve the cross browser compatibility, we use the normalizing to the HTML element and replaces the reset in HTML. Normalizing is done so that the useful defaults are preserved by the browsers instead of erasing them all. Let's look at the usage of the normalizing.
It standardizes the styles for a lot of elements in HTML.
Removes the bugs from common browsers.
By improving usability, the code is briefly explained through documentation.
Example
The following is an example to understand the concept of normalization. In this example, we imported normalize, which does not reset the browser's styles, but displays the same output in all browsers without any differences.
<!DOCTYPE html> <html lang="en"> <head> <title>Example of normalizing CSS</title> <link rel="stylesheet" href= "https://necolas.github.io/normalize.css/7.0.0/normalize.css"> </head> <body> <h1>Hi welcome to another tutorial</h1> <h1>How is your day going?</h1> <h2>We Are learning how to Reset CSS</h2> <h4>It will reset the default CSS by the browser</h4> </body> </html>
The above will display the same output in all browsers.
There is an ongoing debate among developers on which one to choose and which one is better for a smooth flow.
Normalization retains useful default styles and removes useless ones, while reset removes all styles from the browser. In reset we need to redeclare all styles after resetting the browser whereas normalization will keep the required styles and remove only the unwanted ones. Standardization is easy to use and is a modern technology.
in conclusion
There is no much difference between normalizing and resetting as the purpose of both is same which is to preserve the UI of a website and make it compatible to all browsers so the website looks the same in every browser. Both of them have a different approach and depends upon the user's preference.
The above is the detailed content of Difference between resetting and normalizing CSS?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
Making Your First Custom Svelte Transition
Mar 15, 2025 am 11:08 AM
The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Show, Don't Tell
Mar 16, 2025 am 11:49 AM
How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Creating Your Own Bragdoc With Eleventy
Mar 18, 2025 am 11:23 AM
No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Let's use (X, X, X, X) for talking about specificity
Mar 24, 2025 am 10:37 AM
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
