Search⌘ K
AI Features
Home
Courses
The Complete Beginner’s Guide to CSS

Resets and Normalization

Explore the concepts of CSS resets and normalization in this lesson to understand how they address browser style inconsistencies. Learn the differences between aggressive resets that remove all default styles and normalization that preserves useful defaults while fixing variations. This knowledge helps you create consistent web designs regardless of the browser.

We'll cover the following...

Why we need CSS resets and normalization

It’s important for HTML elements to look the same, regardless of which browser is being used to view the web page. Unfortunately, this isn’t true by default due to the way browsers run.

Each browser has its default style sheet that specifies some minimal rules for the elements.

For example, an unstyled <h1> element often has a slightly different amount of padding, depending on which browser is used.

Most of the time, these style defaults are useful. However, there will come a time when a bug occurs in a particular browser because of these differing defaults.

To avoid these inconsistencies, we use CSS resets and normalization.

CSS resets

A CSS reset removes all the browser’s default styles, leaving us to define the styles that we want, according to our needs.

There are multiple types of CSS reset online. The most popular one by far is the Meyer reset:

/* 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;
}

Here, all HTML tags don’t receive a padding, margin, or border. These tags also have ...