Stylesheet of HTML header tags

HTML and HTML5 has 6 header tags to present heading of contents. They are H1, H2, H3, H4, H5, and H6. The default header style of Mozilla, Webkit and W3 are very closed. Users are encourage to create their own style. Obviously browser default style sheet is a good starting point.

Browser default stylesheet for header tags

  Mozilla (Firefox) Webkit (Chrome and Safari) W3 recommendation nytimes.com
  font-size margin font-size margin font-size margin font-size line-height
H1 2em 0.67em 0 2em 0.67em 0 2em 0.67em 0 2.4em 1.083em
H2 1.5em 0.83em 0 1.5em 0.83em 0 1.5em 0.75em 0 2em 1.1em
H3 1.17em 1em 0 1.17em 1em 0 1.17em 0.83em 0 1.5em 1.133em
H4 1em 1.33em 0 1em 1.33em 0 1em 1.12em 0 1.4em 1.1429em
H5 0.83em 1.67em 0 0.83em 1.67em 0 0.83em 1.5em 0 1.2em 1.25em
H6 0.67em 2.33em 0 0.67em 2.33em 0 0.75em 1.67em 0 1.2em 1.25em
Style sheets of header tags in Mozilla and Webkit are identical. W3 has a slightly different version, its font-size for H6 is 0.75em instead of 0.67em.
In general, H1 is 200% larger than H6 in font size, and 100% larger than H4.
The news portal uses customized style sheet on header tags. In fact, style could be tailored to meet your own design needs.

Firefox default CSS code for header tags

Try it »
/** 
  * firefox
  **/
  h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
  }
  
  h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin: .83em 0;
  }
  
  h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
  }
  
  h4 {
  display: block;
  font-weight: bold;
  margin: 1.33em 0;
  }
  
  h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin: 1.67em 0;
  }
  
  h6 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin: 2.33em 0;
  }
  
  

Webkit default CSS code for header tags

Try it »
/** 
  * Webkit
  **/
  h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67__qem;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold
  }
  
  :-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.5em;
  -webkit-margin-before: 0.83__qem;
  -webkit-margin-after: 0.83em;
  }
  
  :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.17em;
  -webkit-margin-before: 1__qem;
  -webkit-margin-after: 1em;
  }
  
  :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.00em;
  -webkit-margin-before: 1.33__qem;
  -webkit-margin-after: 1.33em;
  }
  
  :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
  font-size: .83em;
  -webkit-margin-before: 1.67__qem;
  -webkit-margin-after: 1.67em;
  }
  
  :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
  font-size: .67em;
  -webkit-margin-before: 2.33__qem;
  -webkit-margin-after: 2.33em;
  }
  
  h2 {
  display: block;
  font-size: 1.5em;
  -webkit-margin-before: 0.83__qem;
  -webkit-margin-after: 0.83em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold
  }
  
  h3 {
  display: block;
  font-size: 1.17em;
  -webkit-margin-before: 1__qem;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold
  }
  
  h4 {
  display: block;
  -webkit-margin-before: 1.33__qem;
  -webkit-margin-after: 1.33em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold
  }
  
  h5 {
  display: block;
  font-size: .83em;
  -webkit-margin-before: 1.67__qem;
  -webkit-margin-after: 1.67em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold
  }
  
  h6 {
  display: block;
  font-size: .67em;
  -webkit-margin-before: 2.33__qem;
  -webkit-margin-after: 2.33em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold
  }
  
  

W3 recommended CSS code for header tags

Try it »
/** 
  * W3 recommendation
  **/
  h1              { font-size: 2em; margin: .67em 0 }
  h2              { font-size: 1.5em; margin: .75em 0 }
  h3              { font-size: 1.17em; margin: .83em 0 }
  h4			  { margin: 1.12em 0 }
  h5              { font-size: .83em; margin: 1.5em 0 }
  h6              { font-size: .75em; margin: 1.67em 0 }
  
Tags: