要素には、親要素と子要素や孫要素と呼ばれる、大きい括りの要素と、その中の小さな括りの要素があります。そして、その親要素に指定したスタイリングは子要素に継承されます。つまり、親のスタイルは子孫の要素に、自動的に適用されるのです。
例えば上図のように、<body>が親要素で<body>にフォントサイズの指定をした場合、<body>内にある子要素にも、自動的に親要素のフォントサイズの指定が適用されます（指定がない場合）。
ページ内で文字の大きさや色を統一したい時に、毎回要素ごとに同じ指定をするのは面倒ですよね。このように、親要素に指定したスタイルは、子要素も同じスタイリングを指定することが多いので、指定せずとも自動的にスタイルが適用されるようになっています。記述のシンプル化と合理化を図る為の仕組みなのです。
子要素、孫要素に継承されないものもある
先ほど言ったように、自動的に継承が行われるものは決まっており、継承が行われないものもあります。
例えば、背景の指定やボックスの指定等は継承性はありません。全てのプロパティに、継承されるかされないかの決まりがあります。全て覚えるのは無理なので、よく使う物や、だいたいで把握しておくといいでしょう。
背景やボックスなど、表示に関係するプロパティは継承されないものが多いです。対して、文字関係のプロパティは、ほぼ継承されると思っていていいでしょう。CSSを書いている時に、表示がうまくいかない場合、継承が原因かもしれません。
継承性がないプロパティに強制的に継承をさせる
スタイルを継承してくれないと不便な場面では、強制的にスタイルを継承させることもできます。やり方は、inheritを使用するだけです。
背景の色の指定で見てみましょう。
上の図のように、通常背景のスタイリングは継承されない為、子要素には何も起きません。そこで、body内の子要素にinheritを指定してみます。
すると、上図のようになります。親要素に赤の背景色を指定した場合、通常は子要素は赤くならないけれど、inheritを指定した子要素は背景が赤くなる。と言った感じです。inheritを指定すれば、わざわざ親要素と同じ量の記述をする必要がないので大変便利です。
