Child nodes in html elements will inherit certain style attribute
from their parent element.

For example:

...<style type='text/css'> body {  color: green; }</style>...

<body> <div> ...  <span>   ...    <ul>     <li> ...    </ul>  </span> </div></body>...

will cause the text color for the body, div, span, ul & li elements to
be green.

Child nodes can overide the inherited value by specifying their own
value. the

<div> </div>

element in the above example can override the color to be black by
setting its color style attribute as
div { color: #000000; }
. This is similiar to the concept of overriding properties in a object
oriented programming language such as C, Java etc.

Cascading occurs when multiple styles from different sources affect the
same property for the same element. The process of determine which style
affects the elements is called cascading. Only one value will be used.
Let us examine different possible sources for conflict.

  • Web designer vs web user: users trying to change appearance
    intended by authors.
  • User vs browser: browsers have default styles for elements that
    govern how elements are to be presented.
  • Different rule in the same sheet
  • Increased weightage given to certain properties by authors.

The chain of inheritance as soon as a child node overrides the property.
Inheritance work top to bottom whereas cascade works left to right (Talk
to Lejo for more clarification). Cascading occurs only when more than
one rule is defined for the same property for the same element.
Inheritance occurs only when a rule hasnt been defined for an element.
However this does not mean the element wont have the rule because the
property in question may have a default value. Inherited value wont
apply if the element has the same rule defined.

A side effect of inheritance is not knowing what properties are being
set by the parent thus being unable to override all inherited values.

    Process of identifying the rule that applies

  • Search for selectors, a matching class attribute, element’s id (See
    writeup on CSS Selectors)
  • weight: labeling a rule with !important will cause it
    to have precedence over other non-important rules
  • Order or origin: Author’s styles will be given higher priority than
    user’s styles
  • Specificity: Specific rules will be given higher priority over
    general counterparts.

If no rules have applied after these steps then inheritance and default
values will be used respectively. Elements can also force inheritance by
explicity specifying
inherit
as the value. Combining
!important
with inherit will guarantee the parent’s value to be used over any other
applicable rule.

Advertisements