The difference between resetting and normalizing CSS
The Difference Between Resetting and Normalizing CSS
Developers expect HTML elements to look the same on every browser, though this depends, as each browser has different capabilities. When a browser renders an HTML page, it applies its own default styles. Styles like the title tag can have different sizes and fonts depending on the browser. This means that the title can have margins or extra padding without you even having to write code.
In this tutorial, we’ll look at how to reset and normalize CSS, and what the differences are.
The Difference Between Normalization and Resetting
When working with CSS, developers may encounter browser issues. For example, they may have different font sizes for headings. They may also have different top and bottom margins and default padding. This is where resets and normalization come in handy, as they can make the default CSS more consistent across all browsers, but the debate continues as to which method to use. Let’s take a closer look at normalization and reset to determine the differences between them.
Resetting in CSS
To avoid cross-browser discrepancies, CSS authors use a CSS reset to disable all browser styles. Different browsers have their own user-agent style sheets; this helps websites appear clearer. For example, you may have seen that hyperlinks in most browsers are blue, while visited hyperlinks appear purple.
An example of a default style might be –
font-weight: bold;
font-size: 10px;
All browsers will apply this type of default style, although it depends on the browser which style is applied. Some browsers may apply additional padding, some may change margins, and some may even have different font styles.
A CSS reset will force the browser to apply all styles back to zero, thus avoiding discrepancies due to browser default styles.
Let’s look at an example where we’ve set all elements to the same weight and style.
font-weight: inherit;
font-style: inherit;
font-family: inherit;
CSS developers often discover inconsistencies because their websites look different in different browsers. Resetting helps set the default browser styles to nothing, eliminating any inconsistencies that might arise from different browser styles.
Note – Internet Explorer does not support the inherit attribute, which is why the inherited value is not applied and the user interface on Internet Explorer is affected. Resetting will help us resolve this issue when using Internet Explorer.
Example
Let’s look at an example to see 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 we imported will reset the browser’s default styles. The reset styles will be loaded before other styles, which will result in the browser’s default styles being deleted.
The above output looks the same in every browser because we used reset in the code. After using reset, the differences in output will be minimal.
Normalization in CSS
To improve cross-browser compatibility, we’ve implemented normalization on HTML elements, replacing reset in HTML. Normalization allows browsers to retain useful defaults instead of removing them entirely. Let’s look at how normalization works.
- It standardizes the styles of many elements in HTML.
-
Removed common browser errors.
-
Improved usability by providing concise documentation explaining the code.
Example
Below is an example to help you understand the concept of normalization. In this example, we import normalization, which does not reset browser styles, but displays the same output in all 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>
The above is the output that looks the same in all browsers.
Developers often debate which approach to choose and which is more conducive to a smooth workflow.
Normalization preserves useful default styles and removes unused ones, while resetting removes all styles from the browser. With a reset, we have to redeclare all styles after resetting the browser, while normalization preserves the styles we need and removes only those we don’t. Normalization is easy to use and a modern technique.
Conclusion
There’s not much difference between normalization and resetting, as both serve the same purpose: preserving the website’s user interface and making it compatible with all browsers, so the website looks the same on every browser. Both have different approaches, depending on user preference.