Orvado Technologies is your one-stop shop for custom web site solutions, quality work at affordable rates
 
orvado side

Inheritance

Because HTML tags may be nested, we can look at the elements of a web page as a hierarchical list of tags. Visually, this could be viewed much like the table-of-contents for a book. Each major heading would be a parent of all sub-headings which fall immediately beneath it.

In this sense, you can think of the tags in your HTML document as having a parent-child relationship. We say that a child inherits from it's parent all traits (CSS properties) that are not explicitly defined by the child itself. Take the following example:

<P>This is a <B>test</B> bob</P>
In this example, we would say that the P element is the parent of the B element. If the style sheet defines the P element as having red colored text, the B element will inherit this property if it doesn't explicity declare a color itself. This explicit declaration could appear as an inline style, within a STYLE definition or in an external CSS resource.

Using Percentages

Your style sheet definition may include values that are calculated as a percentage of the parent or default value. This is most commonly used for the sizes of elements or fonts as they're rendered by the browser.

P { font-size: 10pt }
P { line-height: 140% }
The above example calculates the line-height property based on a percentage of the font-size property. In this case, the line-height would be calculated as 14pt.

In the event that you have elements that inherit from a percentage property, any child that defines a percentage property will perform it's calculation based on the calculated result of the parent. In the example above, a child of the P element would calculate any percentage properties based on the 14pt line-height keeping the 140% value hidden.

Exceptions to the Rule

There are certain cases where it is not intuitive for a style to be passed from the parent to the child. The CSS standard has accounted for this and prevents certain properties from being inherited.

One example of this is the BODY element. If you define a background image for this element, it will not be inherited by its children. It is not logical to assume all child elements of the body should use the background image.

This will not affect the standard behavior of the background image. The graphic would still "shine through" elements on the page that would normally render with a transparent background.

Table of Contents

Featured Clients

Pacific Air Force

Pacific Air Force is a personal site that boasts Orvado's graphic design skills.
Site Map   Terms of Service   Privacy Policy