Inheritance of text-align in CSS

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>