The aim of reset.css is to reduce browser inconsistencies, for example in default line heights, margins and the font sizes of headings.
In principle, anyone with a knowledge of HTML and CSS can write a reset.css file, but there is no need to, because there are ready-made reset.css files written by professionals. The person whose code I mention and share here is Eric Meyer. Eric Meyer's reset.css is a structure that you should include in your HTML file before starting a new project.
The reason for using a reset.css file is that the CSS you write while designing a web page can look different in each browser. Reset.css is there to reduce these differences. For example, line height, font size, typeface and margin values in your CSS can look different in Internet Explorer, different in Firefox and different in Chrome. Because reset.css returns all CSS settings to factory defaults, some of these differences shrink.
How do you use a reset.css file?
You can copy the code below, save it as a reset.css file and include it in your HTML file.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
Or you can download the file directly by clicking here.
A reset.css file should not be added once you have already started an HTML project; otherwise your site's structure is bound to be completely broken. The reset.css file must be included when the project is started. You can use it by linking to it before style.css in your HTML file.