Search within TutorialsPark

CSS Inheritance

CSS styles are inherited by child elements from parent(trickle effect).

CSS Cascading Effect.

1.CSS styleheets are called as Cascading Stylesheets because the style properties of each element is

inherited from it's parent element.Hence, the name Cascading Stylesheets.

2.The CSS style rules for each element is a cumulative effect of all its ancestor styles.

Basic Features of CSS Cascade

Trickle Effect : CSS styles applied to <body> trickles down to all elements unless its overidden.

Cumulative Effect : Most style properties are Cumulative, i.e inherited from parent element.

Overide : CSS styles rules for any elements can be created seperately overidding the inherited(cumulative) styles.

The Effect of Cascade becomes important when there is conflict between different style rules for a single element.

CSS Specificity

1.When two or more styles apply to the same element having the same property, importance and position within the Cascade. The rule with the highest Specificity prevails over others.

2. To Calculate specificity we assign numerical value to each type of selector.A sum total is then calculated for a specific rule.

3.For the purpose of assigning a numerical value to each type of selector.Four levels are created a, b, c , d .

a : For Inline Styles

b : Total number of ID selectors.

c : Number of class and attributes and pseudo classes within the Selector.

d : Number of type Selectors and pseudo elements within the Selector

For Calulation purposes there is a difference of base 10 between the four levels of selectors

1000 : For each Inline Styles i.e type a

100 : For each ID.

10 : For each class , attributes and pseudo class.

1 : For each element and pseudo element.

1. Eg: To set style for say <body> element, we have code as body{.....}.

Here specificity level for selector body is d.Since, its an element selector(type d)

Hence, specificity parameters are a=0 , b=0, c=0, d=1. Hence, total score for the CSS rule is 1.

2. Similarly, Selector body p{.....} has a specificity of 2(a=0, b=0, c=0, d=2).

3. .myText{....} has a specificity of 10 (a=0, b=0, c=1, d=0).

4. body p.myText{....} has a specificity of 12 (a=0, b=0, c=1, d=0).

Example: CSS Specificity .

Give it a TRY! » Note: The specificity of Inline CSS is highest at 1000.

CSS Specificity (Inline style)

1. Though inefficient, inline styling is the most specific way to style elements.

2. For inline styles the values for parameter to calculate specificity are a=1000, b=0, c=0, d=0. Hence total score is 1000. .

CSS Specificity for Inline Styles

Give it a TRY! » Note: Though inefficient , this method can be used for certain specific design requirements for few selected webpages.