css

Simple CSS reset code

Feb 9, 2020

A quick CSS reset based on Meyer’s CSS Reset.

Since all browsers come with a different default style sheet (user agent stylesheet) for every page we need some way to make them consistent. Resetting your css styles (or reboot) aims to reset all your elements to a baseline value so that we get a consistent look and feel across browsers.

Some examples of browser’s default style sheets:

Heres a quick css reset code that I have been using. I didn’t bother using other css reset libraries (normalize.css) since they can be bloated and opinionated. It is based on Meyer’s CSS Reset

Show me the code

/* Margins, padding and borders
 * *********************************** */

html, body,
h1, h2, h3, h4, h5, h6,
a, p, span,
em, small, strong,
sub, sup,
mark, del, ins, strike,
abbr, dfn,
blockquote, q, cite,
code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
main, aside, nav,
header, hgroup, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,
tbody, tfoot, thead,
tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Typography
 * *********************************** */

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    line-height: 1.4;
}

a,
a:visited {
    color: inherit;
}

/* Layout
 * *********************************** */

article,
aside,
footer,
header,
nav,
section,
main {
    display: block;
}

* {
    box-sizing: border-box;
}

*:before,
*:after {
    box-sizing: inherit;
}

/* Element specific
 * *********************************** */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ol,
ul {
    list-style: none;
}

img,
video {
    max-width: 100%;
}

img {
    border-style: none;
}

Some notes

  • Tried to keep this as minimal as possible - to be used as a starting point.
  • box-sizing: border-box would be the most important setting here since this will make sure that our sizing is consistent.
  • images are responsive by default
  • font-size: 62.5% on the html element and rem on everything else - based on this

Do I need this if I am already using a css framework like boostrap?

Most likely not - since usually those frameworks already contain their own css resets. This would be useful if you are starting something from scratch - without using frameworks.

Hope this helps!

See Also

Using CSS to highlight images not containing the 'alt' attribute

Read more