Examining the CSS reset

Up at the very top of our style sheet, there is a CSS comment that credits Eric Meyer for the reset. We'll leave that in there:

Next, we have the bulk of the reset. This huge chunk of code is vaguely a reminder of the rule set you learned about in Chapter 1, CSS Foundations. It's really just a rule set with a very long selector. The selector has just about every HTML element separated by commas:

This means that all these elements are going to receive the same styles from the declaration block:

... {
  margin: 0; 
  padding: 0; 
  border: 0; 
  font-size: 100%; 
  font: inherit; 
  vertical-align: baseline; 
}

As you can see in the first three declarations of this declaration block, margin, padding, and border are set to 0. Using the value of 0 is the same as using 0px just with two less characters. You just don't need to specify pixels if the value is zero. This removes the default margin, padding, and border from all the elements. Right below those declarations, we have the font-size property, which is 100%. This line is an instruction to make all the fonts browser-default, which basically means 16px since the default browser font size for most desktop browsers is 16px.

Below this declaration block, we have the new HTML5 elements whose display we set to block. This allows some older browsers that don't recognize these new elements to now consider them block-level elements. This allows HTML5 to work in some older browsers:

/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 

Next, we have a new selector and declaration that sets the line-height to 1:

body { 
  line-height: 1; 
} 

The line-height property cascades downward, meaning if we set it on an element, for example, body, it will be inherited down to all the other elements it contains. The value of 1 is a unit-less value, so 1 will be equal to the size of the font. The value of 1.2 would be 1.2 times the size of the font. So, if the font-size is 16px and line-height is 1, then the line-height will be equivalent to 16px. If line-height is set to 2 and your font size is 16px, then line-height will be equivalent to 32px.

Next in the style sheet are the ordered and unordered lists, where we remove the bullet point and numbers from ul, ol and by way of cascade, li:

ol, ul { 
    list-style: none; 
} 

Beneath this, you will see that the reset has set some defaults for the blockquote and q elements. I find myself rarely using block quotes, and this reset is kind of long, so typically I get delete this section of the reset. But if you find yourself using these elements often, then keep it in there:

blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 

Next, we have 2 table properties being reset: border-collapse and border-spacing: which I've never dug into too deeply but ultimately handle some nuanced table inconsistencies that you'll never see in any modern desktop browser.

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

This is pretty much the anatomy of a CSS reset. This reset should be a part of your base layer of CSS that gets you started. We'll now look at how we can add to this and customize it.