How to reset CSS formatting?

11

It was not uncommon to go through situations in which the browser itself interferes with the stylesheet by adding defaults, such as size of margins and font of headers, the default height of the line.

Is there any way to reset a CSS, ie "reset" all parameters to prevent browser interference?

    
asked by anonymous 16.12.2013 / 15:47

7 answers

2

This could be a starting point.

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126   
   License: none (public domain)*/

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;
}
    
16.12.2013 / 15:47
11

There is no standard and absolute solution to remove browser interference, but you can yes update the standards to a certain standard by inserting a CSS normalization file that defines all CSS rules for a pattern, I recommend using normalize.css ( code ).

It seems to be the most complete and most up-to-date option for this function.

Demo page .

    
16.12.2013 / 15:56
6

You can use the generic selector and reset everything as you see fit ...

*{
margin: 0;
padding: 0;
...
}
    
16.12.2013 / 16:26
2

I know two modes, one of them is a well known and discussed reset

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}

But there are criticisms that a reset is not the ideal mode, that instead of ending all styles, the most appropriate would be to normalize the styles between browsers. For this they created normalize.css

    
21.12.2013 / 01:45
1

Do you know the Normaset ? It is a CSS normalizer and reset.

According to the site he:

  • Resets all standard HTML styles, such as margins, fill, and more.
  • Normalizes styles for a wide range of elements.
  • Fixes common browser errors and inconsistencies.
  • Improves usability with subtle improvements.
21.12.2013 / 04:28
1

I usually use the Normalize.css

  

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

translating:

  

Normalize.css makes browsers reproduce all elements more consistently and by modern standards. It achieves unique and precisely the styles that need to be standardized.

    
21.12.2013 / 03:32
1

Each one does the css reset according to how it works, for example I like my css reset so

* {margin:0; padding:0; list-style:none; vertical-align:baseline;}

Or you can be a bit more violent and reset it like this

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;
}

This goes from each one

    
29.01.2014 / 21:31