CSS Inheritance

8/6/2019 CSS Inheritance

1/95

CSSINHERITANCE


2/95

Lets startwith the

document

tree


3/95

Before we explore inheritance, we

need to understand thedocument tree.


4/95

All HTML documents are trees.


5/95

Document trees are made from

HTML elements.


6/95

The document tree is just like

yourfamily tree.


7/95

An ancestorrefers to any

element that is connected butfurther up the document tree.

Ancestor


8/95

A descendant refers to any

element that is connected butlower down the document tree.

Descendant

Descendants


9/95

A parent is an element that is

connected & directly above anelement in the document tree.

Parent


10/95

A child is an element that is

connected & directly below anelement in the document tree.

Child


11/95

A sibling is an element that

shares the same parent asanother element.

Parent

Siblings


12/95

Next, a bit

about

CSS rules


13/95

We also need to understand the

basics of CSS rules beforeexploring inheritance.


14/95


15/95

CSS rules are made up of

five components.


16/95

The selector"selects" the

elements on an HTML page thatare affected by the rule.

p { color: red; }

Selector


17/95

The declaration block is a

container that consists ofanything between (and including)

the brackets.

p { color: red; }

Declaration block


18/95

The declaration tells a browser

how to render any element on apage that is selected.

p { color: red; }

Declaration


19/95

The property is the aspect of that

element that you are choosing tostyle.

p { color: red; }

Property


20/95

The value is the exact style you

wish to set for the property.

p { color: red; }

Value


21/95

Now

what is

inheritance?


22/95

Inheritance is where specific CSS

properties are passed down todescendant elements.


23/95

To see inheritance in action, we

will use the HTML code below:

Loremipsum dolor

sit ametconsect etuer.


24/95

Note that the element sits

inside the

element.


25/95

We will also use this CSS code.

Note that the element hasnot been specified.

p { color: red; }


26/95


27/95

But why is the element

coloredred when it has not beenstyled?


28/95

Because the element has

inherited the color property fromthe

element.


29/95

Why is

inheritance

helpful?


30/95


31/95

Otherwise we would need to

specify properties foralldescendant elements.

p { color: red; }

p em { color: red; }


32/95

CSS files would be much larger

in size, harder to create andmaintain as well as slower to

download.


33/95

Are all CSS

properties

inherited?


34/95

No. All CSS properties are

not inherited!


35/95

If every CSS property was

inherited, it would make thingsmuch harderfor authors.


36/95


37/95

For example, what would happen

if the border property wasinherited by default


38/95

and we then applied a borderto

the

element?

p { border: 1px solid red; }


39/95

The inside the

would

also have a red border.

element


40/95

Luckily, borders are not

inherited, so the would nothave a red border.

element


41/95

Generally speaking, only

properties that make our jobeasierare inherited!


42/95

So, which

properties are

inherited?


43/95

The following CSS properties are

inherited


44/95

azimuth, border-collapse, border-spacing,

caption-side, color, cursor, direction, elevation,

empty-cells, font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,

line-height, list-style-image, list-style-position,

list-style-type, list-style, orphans, pitch-range,

pitch, quotes, richness, speak-header, speak-numeral, speak-punctuation, speak, speech-

rate, stress, text-align, text-indent, text-

transform, visibility, voice-family, volume, white-

space, widows, word-spacing


45/95

Yikes! That is a lot of properties.


46/95

To simply things, lets take a look

at some of thekey groups of properties.


47/95


48/95











49/95


50/95











51/95

And, importantly, the

color property is inherited:


52/95


53/95

Is font-size

inherited?


54/95

The simple answer is yes.

However, font-size is inherited ina different way to many other

properties.


55/95

Rather than the actual value

being inherited, the calculatedvalue is inherited.


56/95


57/95


58/95


59/95

Now, a font-size is applied to the

element only. The hasnot been specified.

p { font-size: 80%; }


60/95

If the font-size value of 80% were

to be inherited, the would be sized to 80%

of the

element


61/95

and the rendered document

would look like this:

element


62/95

However, this is not the case!

The is the same size as the

.

element


63/95

So how does inheritance work for

font-size?


64/95

Lets look at three examples

in action.

W ill th HTML


65/95

We will use the same HTML

code as before:

Loremipsum dolor

sit ametconsect etuer.

Whi h d th


66/95

Which produces the same

document tree as before.


67/95

Example 1:

Pixels

Th < > l t h b i


68/95

The

element has been given

a font-size of14px.

Note: pixels are not recommended for sizing fonts due to accessibility

issues associated with older browsers such as IE5 and IE6.

p { font-size: 14px; }


69/95

So the < > element inherits the


70/95

element value calcuated value

default font size approx 16px

unspecified approx 16px

14px 14px

unspecified inherited value = 14px

So, the element inherits the

14px value.


71/95

Example 2:

Percentage

The



72/95

The


a font-size of85%.

p { font-size: 85%; }

The browsers default font size


73/95

The browsers default font-size

(16px) and the percentage value(85%) are used to create a

calculated value (16px x 85% =

13.6px). This calculated value isinherited by descendants.

So the element inherits the


74/95




85% 16px x 85% = 13.6px

unspecified inherited value = 13.6px


13.6px calculated value.


75/95

Example 3:

EMs

The



76/95

The


a font-size of.85em.Note: Avoid using EMs for font-size values under 1em as IE5 renders these

values in pixels instead of EMs (.8em is rendered as 8px).

p { font-size: .85em; }



77/95


(16px) and the EM value (.85em)are used to create a calculated

value (16px x .85em = 13.6px).

This calculated value isinherited by descendants.

So the element inherits the


78/95




.85em 16px x .85em = 13.6px



13.6px calculated value.

Those examples were too simple


79/95

Those examples were too simple.

What about more complexexamples using different

elements?


80/95

Example 4:


81/95



82/95

The browsers default font size

(16px) and the body percentagevalue (85%) are used to create a

calculated value (16px x 85% =

13.6px). This calculated value isinherited by descendants unless

new values are specified.

The font-size inheritance in


83/95

element value calculated font-size


85% 16px x 85% = 13.6px

200% inherited value 13.6px x 200% = 27.2px

150% inherited value 13.6px x 150% = 20.4px



The font size inheritance in

action


84/95

Using inheritance

for efficiency

Authors can use inheritance to


85/95

Authors can use inheritance to

write efficient CSS.

For example, you can set the


86/95

p , y

color, font-size and font-family onthe body element.

body {

color: #222;

font-family: arial,

helvetica, sans-serif;font-size: 90%;

}


87/95

You can then override the


88/95

properties as needed, specifyingnew color values...

body {

color: #222;

f f il i l


89/95

font-family: arial,

helvetica, sans-serif;font-size: 90%;

}

h1, h2, h3 { color: green; }h4, h5, h6 { color: black; }

new font-family values...


90/95

y

body {color: #222;

font-family: arial,


91/95

helvetica, sans-serif;

font-size: 90%;}

h1, h2, h3 { color: green; }

h4, h5, h6 { color: black; }

h1, h2, h3, h4, h5, h6 {

font-family: georgia,times, serif;

}

and new font-size values as


92/95

needed.

}

h1, h2, h3 { color: green; }

h4 h5 h6 { color black }


93/95

h4, h5, h6 { color: black; }

h1, h2, h3, h4, h5, h6 {

font-family: georgia,

times, serif;

}

h1 { font-size: 200%; }

h2 { font-size: 150%; }

h3 { font-size: 125%; }

#footer { font-size: 90%; }

Now, go forth and


94/95

inherit the world!


95/95

Were done!

Documents

CSS Inheritance