Why is this page's font-size overriden by reset.css's font-size?

Go to this开发者_运维技巧 page and look at any paragraph's text font size using Firebug. The font size is 13px. Here reset.css body: font-size 100% is overrding master.css body: font-size 62.5%. Why?

My understanding is that if the same tag is defined in two css files, the one that comes last takes precedence. I expected it would use the one from master.css line 10. Don't the the two Body tags have the same specificity?

p takes precedence over body as CSS stands for Cascading Style Sheets

body -> p

#master.css
body {
   font-size: 62.5%;
}

#reset.css
body, ..., p {
   font-size: 100%;
}

Remove the p element from reset.css and you're fine! You can also give the p element a class or an id and you could also add something like:

#text.css
p.standard {
   font-size: 55%;
}

Hope it helps!

What is happening is that the body style defined in reset.css gets overridden by the body style in master.css, but then as you get to individual elements the styling specified by reset.css is more specific and thus a better match for the element and replaces the style defined by master.css for the body.

If you want to have master.css replace the font defined by reset.css, you need to use the same CSS selector, not just the selector for the entire body of the document.