What does to initialize the CSS mean? It means to set up default style values for the different elements we’ll be using. These settings allow us to reduce browser inconsistencies.

Why should we initialize the CSS? That’s because In order to get the same visual result in every browser we need to initialize (or reset) the elements we’ll use.

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on1Eric A. & Kathryn S. Meyer, CSS Tools: Reset CSS.

How to initialize the CSS? You can do this by using a library such as normalize.css, Destyle.css; or setting up one by one only the elements you are going to use.

Rules to manually reset your elements: To avoid unrecommended practices you should keep in mind these two tips:

  • To reset them manually you should add the styles to the element itself
  • Never use classes or an id to reset an element

That’s because classes are for the custom styles, not for the initial values. And IDs in most cases are for a js functionality.

Quick example

div{
    margin: 0;
    padding: 3px;
}

ul{
    list-style: none;
}

h1{
    margin: 5px;
    font-size: 30px;
    color: #171717;
    font-family: 'Courier New', Courier, monospace;
}

Photo by Sai Kiran Anagani on Unsplash

References   [ + ]