HTML and CSS Reference
In-Depth Information
Some styles applied to a parent element are automatically inherited by children elements.
For example, if a series of paragraph elements are inside an article element, and font and text
styles are applied to the article, all the paragraph elements will automatically inherit the font
and text styles as well. The following code demonstrates this concept:
<style>
div {
font-family: sans-serif;
color: green;
}
</style>
And with the following HTML:
<div>
hello div world.
<p>
Hello paragraph world.
</p>
</div>
Both the
div
and the paragraph will have the font and color styles applied to them because
the paragraph element does not have any of its own styles defined. If you assign styles to the
paragraph element to override the
div
styles you would be able to prevent the inheritance of
the styles, as shown here:
<style>
div {
font-family: sans-serif;
color: green;
}
p {
font-family: serif;
color: blue;
}
</style>
CSS for large websites can be complicated. Large websites may have CSS coming from differ-
ent sources. It could be on each page and referenced externally. External libraries are more
and more common as experts throughout the community have created themes that can be
imported into your web applications. With all this styling coming from different sources,
inheritance of styles can be tricky. In some cases you may just need to override all other com-
Search WWH ::
Custom Search