Skip to main content
Practice

Reset CSS

The Necessity of Reset CSS​

When creating web pages, browsers like Chrome, Edge, Safari, etc., have their own default styles.

For instance, using the same HTML and CSS code, a <button> element may look different in Chrome versus Safari.

Due to these varying browser styles, the same HTML and CSS code can render differently across browsers.

To minimize these discrepancies, Reset CSS is used.


What is Reset CSS?​

Reset CSS is a CSS code used to minimize the differences in default styles across various browsers. It serves to reset the browser’s default styles.

By resetting margin, padding, font size, and other default styles, Reset CSS ensures consistent design and layout across browsers.


Commonly Used Reset CSS​

Commonly used Reset CSS includes the following:


Code Example

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

This reset CSS sets many HTML elements' default margins, paddings, and borders to zero, creating a consistent layout.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.