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.
Search WWH ::

Custom Search