Skip to main content
Practice

Reset CSS

When building web pages, each web browser like Chrome, Edge, Safari has its own default styles.

For example, using the same HTML and CSS code, the default style of the <button> element is displayed differently in Chrome and Safari.

Because each browser has different styles, even with the same HTML and CSS code, the webpage can be displayed differently across browsers.

To minimize these cross-browser inconsistencies, we use Reset CSS.


What is Reset CSS?​

Reset CSS is a CSS code used to minimize the style differences between various browsers by resetting the browser's default styles.

Through this, the default styles such as Margin, Padding, Font Size, etc., are reset to ensure consistent design and layout across different browsers.


Below is a typical Reset CSS code.

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 the default margin, padding, and border of many HTML elements to 0 to create a consistent layout.

Want to learn more?

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