Home > Article > Web Front-end > Difference between resetting and normalizing CSS?
Difference between resetting and normalizing CSS?
- WBOYforward
- 2023-08-19 12:21:28828browse
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!