CSS Reset and Font-family

Question

html, body, h1, h2, h3, h4, p, div, ul, ol, li {
padding: 0;
border: 0;
margin: 0;
font: inherit;
font-size: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif; 
}

Does someone know why the "font-family" property does not work if I move it above "font:inherit"?

Answer 1

Because font is a shorthand that includes font-family .

If you set the same property twice in the same rule-set, then the last one wins.

To illustrate:

 div { display: inline-block; height: 20px; width: 20px; padding: 5px; margin: 5px } .A { border: solid red 1px; border-left: dotted blue 2px; } .B { border-left: dotted blue 2px; border: solid red 1px; } 

 <div class="A"></div> <div class="B"></div>