This chapter is from the book
This chapter is from the book
This chapter is from the book
Inheriting Properties from a Parent
No, this book hasn’t suddenly become the Visual QuickStart Guide to Real Estate. Child and descendent HTML tags generally assume the styles of their parents—inherit them—whether the style is set using CSS or is inherited from a browser style. This is called inheritance of styles.
For example, if you set an ID called copy and give it a font-family value of Times, all of its descendents would inherit the Times font style. If you set a bold tag to red with CSS, all of its descendents will inherit both the applied red and the inherent bold style 
.
)
The final result of the styles applied and inherited is bold, red, and italicized text in Times font. Styles in parentheses are inherent styles applied by the browser for the particular HTML tag.
In some cases, a style property is not inherited from its parent—obvious properties such as margins, width, and borders. You will probably have no trouble figuring out which properties are inherited and which are not. For example, if you set a padding of four pixels for the paragraph tag, you would not expect bold tags within the paragraph to also add a padding of four pixels. If you have any doubts, see Appendix A, which lists all the CSS properties and how they are inherited.
If you did want to force an element to inherit a property of its parent, many CSS properties include the inherit value. So, in the previous example, to force all the bold tags in a paragraph to take on the 4px padding, you could set their padding value to inherit.
Managing existing or inherited property values
When defining the styles for a selector, you do not cause it to lose any of its inherited or inherent attributes unless you specifically override those styles. All those properties are displayed unless you change the specific existing properties that make up its appearance.
In addition to overriding the relevant property with another value, many CSS properties have values that allow you to override inheritance:
- inherit—Forces a property to be inherited that would normally not be inherited, or overrides other applied style values and inherits the parent’s value.
- none—Hides a border, image, or other visual element.
- normal—Forces the default style to be applied.
- auto—Allows the browser to determine how the element should be displayed based on context.