CSS: text-indent and text-align are ignored - html

Question

I guess the answer to this may be simple, but I can't figure it out on my own.
I've got the following HTML:
<div id="excerpt">
<p class="chapter">Chapter One</p>
<p>Text</p>
<div class="copyright-notice">
<p>Copyright © 2014 Name. All rights reserved.</p>
</div>
<!--end copyright-notice-->
</div>
<!--end excerpt-->
and the following CSS to go with it:
#excerpt {
padding:20px;
color:#000000;
}
#excerpt p {
line-height:1.4em;
text-indent:45px;
text-align:justify;
}
p.chapter {
text-align:center;
text-indent:0;
font-size:16pt;
text-transform:uppercase;
}
.copyright-notice {
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
margin:20px auto;
padding:20px;
}
.copyright-notice p {
display: block;
color:#666666;
text-align: center;
text-indent:0;
}
JS Fiddle reproduction.
As you can see I try to center the text and set the indent to 0 for the paragraph with the chapter class as well as the text within the copyright notice. But it doesn't work.
If I apply the style to the paragraph directly in the HTML file like:
<p style="text-align:center;text-indent:0;">text</p>
JS Fiddle reproduction.
It'll work. But as soon as I try to style those paragraphs through CSS text-align and text-indent get ignored.
Any idea what I'm doing wrong? Thanks for your help!

Answer 1

This is just a specificity issue.
The selector #excerpt p is more specific than p.chapter. Therefore text-indent:0 isn't applied. The reason it was applied when using the style attribute, is because inline CSS is more specific.
More specifically, (pun intended), #excerpt p has a specificity calculation of 101. Whereas p.chapter has a specificity of 11. (An id is 100 points, a class is 10, and an element is 1).
As for a solution, use either of the following to avoid the specifity conflict.
p {
text-indent:45px;
}
p.chapter {
text-indent:0;
}
or..
#excerpt p {
text-indent:45px;
}
#excerpt p.chapter {
text-indent:0;
}
(Other styling omitted from brevity.)
The latter example is probably what you should go with because you don't want all paragraph elements to be indented, just those that are a descendant of #excerpt. I'd avoid using id's in CSS as much as possible though - save those for JS.