Inheritance of text-align in CSS - html

Question

I want to set all the 'p' tags to 'justify' and just the header section to 'center'.
One more thing to note here is that I selected paragraphs with type selector (specificity: 1) and the header with id selector (specificity: 100).
Moreover #header selection comes after p selection. If it is true that text-align property is inheritable, I guess 'center' style is supposed to get higher importance over 'justify' for the 'p' tag in header. But it isn't working that way.
I even checked out similar questions on stackoverflow and used text-align: initial over #header p. That didn't work either.
p {
text-align: justify;
}
#header {
text-align: center;
}
<div id="header">
<h1>Article Name</h1>
<p>Author Name</p>
</div>
<p>
... more paragraphs
</p>

Answer 1

#header, #header >p {
text-align: center !important;
}
p {
text-align: justify;
}
<div id="header">
<h1>Article Name</h1>
<p>Author Name</p>
</div>
<p>
... more paragraphs
</p>

Answer 2

You can create classes that you can reuse :
.justify{
text-align: justify;
}
.center{
text-align: center;
}
<div class="center">
<h1>Article Name</h1>
<p class="center">Author Name</p>
</div>
<p class="justify">
... more paragraphs
</p>