DEV Community

Cover image for CSS Reset
Ustariz Enzo
Ustariz Enzo

Posted on • Edited on

16 2

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)