When viewing tutorials related to layout, I noticed that often before starting work, the authors set some default styles, override the default browser styles. Actually, there were a couple of questions about this:

  • Why is this done?
  • Styles which elements should be redefined at the very beginning?
  • Where can I read about it in more detail and find the code? Google didn't help me very much, I confess, it may be bad for Google.

    5 answers 5

    Why is this done?

    By default, browsers have built-in definitions for HTML elements. For example, <body> and <p> have a margin , <ul> and <ol> have padding and list-style , and so on. In each browser, these preset values ​​can be different, respectively, normalize.css or reset.css are needed in order to start from the same base. Their difference is that normalize.css brings all elements to the same style, and reset.css resets everything completely to zero. Personally, I prefer to use reset.css , because, as a rule, all the elements are then overridden anyway, and for each project a kind of UI kit is formed. But if you are laying out a page without defining the definition of all elements, then it is possible that normalize.css is suitable for you - so you will not need to set indents between paragraphs and headings, redefine lists, etc.

    Styles which elements should be redefined at the very beginning?

    It all depends on what strategy you have chosen :) My required set:

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

    Where can I read about it in more detail and find the code?

    Good article on HTML academy and on Habré .

    Code: reset.css , normalize.css .

    PS reset of the future will look like this:

     * { all: unset; } head { display: none; }

      There are two main approaches - reset.css and normalize.css. The rest is in google.com

         html, body { margin: 0; padding: 0; }

        The rest - pens)

          • This is done to ensure that all browsers lead default styles to some kind of nominal, and get more expected behavior from the elements on the page and there are no various "ghostly" indents in some firefox, and correct display in chrome (for example).

          • Redefined mainly links, lists, indentation of internal and external in the body , div'a , input fields, by and large, everything that is used in the project, for good you need to "nullify".

          • Googly various reset.css .

          For example, as you can see on the screen, styles are rendered differently in different browsers. In this case, FF added an indent before the p tag. In order to avoid such cases, style resetting is applied. Render styles in different browsers

          Some tips:

          • Reset styles - a separate file included in the document at the very beginning.
          • It is better for individual elements to paint style dumps separately in order to achieve maximum control over the appearance of the page. Of the minuses - perhaps, to forget something.
          • The reset does not necessarily lead to zero values, you can immediately specify those that will be used by default in your project.

          Written above is an excerpt from an article from Habr, hence ,.

            Use normalize.css popular and proven library for the normalization of styles in different browsers. And then use the reset (set as default) styles to your taste.