Inheriting Properties from a Parent
| No, this is not the Visual QuickStart Guide to Real Estate. Every HTML tag that can be controlled with CSS has a parenta container tag that surrounds it. Those nested child tags are the parent to tags nested within them, and these are in turn its child tags, and descendant tags to its parents (Figure 2.52). Figure 2.52. Parent, children, and descendants in HTML-structured code. Child and descendant HTML tags generally assume the styles of their parents, whether the style is inherent (as with the bold tag) or applied using CSS. 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 descendants will inherit the Times font style. If you set a bold tag to red with CSS, then all of its descendants are going to inherit both the applied red and the inherent bold style (Figure 2.53). Figure 2.53. The final results of the styles being applied and inherited is bold, red, and italicized text in Times font. In some cases, a style property is not inherited from its parentobvious 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 4 pixels for the paragraph tag, you would not expect bold tags within the paragraph to also add a padding of 4 pixels around them. If you have any doubts, though, check this book's Web site (webbedenvironments.com/css_html_ajax) for a list of all the properties, as well as whether or not 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 example above, if you did want 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 ValuesBy 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 the specific existing properties that make up its appearance are changed. For example (Figure 2.54), you could set the following for the bold tag to not display as bold when it is within a paragraph (Code 2.30). Figure 2.54. Despite being in the bold tag, the second line of text has had the inherent bold style overridden by another value. Code 2.30. When the bold tag is in a paragraph, it will not be bold.
In addition to simply overriding the relevant property with another value, many CSS properties have values that allow you to override inheritance:
|
xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Managing Existing or Inherited Property Values</title> <style type="text/css" media="screen"> body { font: 1.2em Georgia, 'Times New Roman', times, serif; color: #000000; background-color: #fff; margin: 8px; } 
EAN: 2147483647
Pages: 230