Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between resetting and normalizing CSS?
Developers want the HTML elements to look the same on every browser, though it depends, as the functionality of each browser differ. When the browser render a HTML page, it will apply its own default styles. Styles like the heading tag with different sizes and fonts depending on the type of browser. Which means that the headings can have margins or extra padding without you even writing the 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?
While using CSS, developers may encounter few problems with browsers like they might have different font for headings and sizes etc. The top and the bottom margins can be different along with the default padding. Here comes the resetting and normalizing into action, as they make the default CSS more consistent across all the browsers but the debate between which to use is still on. Let’s look at both normalizing and resetting in detail so that we can determine the difference between them.
Resetting 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;
Such types of default styles are applied by all the browsers though it depends upon the browser which style they are going to apply. Some may apply extra padding some may alter the margins and some even may have a different font style.
The CSS reset will force the browser to apply all the styles reset to null which avoids the differences that appear due to default styles of the browsers.
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 − The internet explorer will not support the inherit property which is why the inherited values do not get applied and the UI is affected on the internet explorer. Reset will help us solve this problem while using the internet explorer.
Example
Let’s look at an example of how we can reset the default browser styles.
<!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.
Briefly explains the code through documentation with improved usability.
Example
Following is an example to understand the concept of normalizing. In this, we imported normalize which will not reset the styles of the browser but it will show the same output without any difference in all the browsers.
<!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>
Above is the output that will look the same in all of the browsers.
There is an ongoing debate among developers on which one to choose and which one is better for a smooth flow.
Normalizing retains the default styles that are useful and removes those that are not whereas the reset removes all the styles of the browser. In reset, we will have to re declare all the styles after resetting the browser whereas, normalizing will keep the required styles and only removes the unwanted ones. Normalizing is easy to use and is a modern type of technology.
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.
3K+ Views
