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 id="Hi-welcome-to-another-tutorial">Hi welcome to another tutorial</h1> <h3 id="How-is-your-day-going">How is your day going?</h3> <h2 id="We-Are-learning-how-to-Reset-CSS">We Are learning how to Reset CSS</h2> <h4 id="It-will-reset-the-default-CSS-by-the-browser">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 id="Hi-welcome-to-another-tutorial">Hi welcome to another tutorial</h1> <h1 id="How-is-your-day-going">How is your day going?</h1> <h2 id="We-Are-learning-how-to-Reset-CSS">We Are learning how to Reset CSS</h2> <h4 id="It-will-reset-the-default-CSS-by-the-browser">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!
So Many Color LinksApr 13, 2025 am 11:36 AMThere's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.
How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AMRobin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted
Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AMI absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not
New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AMMany popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that
One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AMPage reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at
Domain-Driven Design With ReactApr 13, 2025 am 11:22 AMThere is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth
Detecting Inactive UsersApr 13, 2025 am 11:08 AMMost of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also
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
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
WebStorm Mac version
Useful JavaScript development tools
