DEV Community

Cover image for CSS Reset
Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

CSS Reset

Hey fellow creators

A CSS reset is a nice way to start from a blank canvas in HTML/CSS and in web development in general, because some HTML elements have default values to their properties.

If you prefer to watch the video version, it's right here :

1. The short reset I use in most of my videos and tutorials.

Here’s the code you can add to your CSS style that will remove all of the margin and padding:

*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Enter fullscreen mode Exit fullscreen mode

It will also take into account the padding and the borders when calculating the height and the width of an element thanks to the "border-box" value.
 

2. But there’s another option!

If you want a more complete CSS reset, you can simply google Reset CSS and you’ll find the famous "mayer CSS reset" : https://meyerweb.com/eric/tools/css/reset/

It's a very popular way to reset the value of a lot of property when starting a new project.
Here it is :

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;
}
Enter fullscreen mode Exit fullscreen mode

 
This will allow you to have a nice and clean canvas to work from!
There are a lot of different CSS resets and you can literraly build your own if you have some preferences.

 
Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Discussion (0)