HTML and CSS Reference
In-Depth Information
That's interesting
because I noticed the text inside the
<div> is all inside other block elements,
like <h2>, <h3>, and <p>. So, if text-align
is aligning inline elements in the <div> block
element, how is the text in these nested
block elements getting aligned?
Good catch. All the text inside the
<div>
element is in nested block elements, but it is
all aligned now. That's because these block
elements
inherit
the
text-align
property
from the
<div>
. So here's the difference:
rather than the
<div>
itself aligning the
text in the headings and the paragraphs
(which it won't do because these are block
elements), the headings and paragraphs
are inheriting the
text-align
value of
“center”, and then aligning
their own
content
to center.
So what? Well, if you think about it, this
gives you a lot of leverage when you use a
<div>
, because you can wrap a section of
content in a
<div>
and then apply styles
to the
<div>
rather than each individual
element. Of course, keep in mind that not
all properties are inherited by default, so
this won't work for all properties.