CSS Inheritance - a simple step-by-step tutorial
-
Upload
russ-weakley -
Category
Design
-
view
64.457 -
download
2
description
Transcript of CSS Inheritance - a simple step-by-step tutorial
![Page 1: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/1.jpg)
CSSINHERITANCE
![Page 2: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/2.jpg)
Let’s startwith the
documenttree
![Page 3: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/3.jpg)
Before we explore inheritance, weneed to understand the
document tree.
![Page 4: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/4.jpg)
All HTML documents are trees.
![Page 5: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/5.jpg)
Document trees are made fromHTML elements.
![Page 6: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/6.jpg)
The document tree is just likeyour family tree.
![Page 7: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/7.jpg)
An ancestor refers to anyelement that is connected butfurther up the document tree.
Ancestor
![Page 8: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/8.jpg)
A descendant refers to anyelement that is connected but
lower down the document tree.
Descendant
Descendants
![Page 9: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/9.jpg)
A parent is an element that isconnected & directly above anelement in the document tree.
Parent
![Page 10: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/10.jpg)
A child is an element that isconnected & directly below anelement in the document tree.
Child
![Page 11: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/11.jpg)
A sibling is an element thatshares the same parent as
another element.
Parent
Siblings
![Page 12: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/12.jpg)
Next, a bitabout
CSS rules
![Page 13: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/13.jpg)
We also need to understand thebasics of CSS rules before
exploring inheritance.
![Page 14: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/14.jpg)
CSS rules tell browsershow to render specific elements
on an HTML page.
![Page 15: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/15.jpg)
CSS rules are made up offive components.
![Page 16: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/16.jpg)
The selector "selects" theelements on an HTML page that
are affected by the rule.
p { color: red; }
Selector
![Page 17: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/17.jpg)
The declaration block is acontainer that consists of
anything between (and including)the brackets.
p { color: red; }
Declaration block
![Page 18: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/18.jpg)
The declaration tells a browserhow to render any element on a
page that is selected.
p { color: red; }
Declaration
![Page 19: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/19.jpg)
The property is the aspect of thatelement that you are choosing to
style.
p { color: red; }
Property
![Page 20: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/20.jpg)
The value is the exact style youwish to set for the property.
p { color: red; }
Value
![Page 21: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/21.jpg)
Now…what is
inheritance?
![Page 22: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/22.jpg)
Inheritance is where specific CSSproperties are passed down to
descendant elements.
![Page 23: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/23.jpg)
To see inheritance in action, wewill use the HTML code below:
<p>Lorem <em>ipsum</em> dolor sit amet consect etuer.
</p>
![Page 24: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/24.jpg)
Note that the <em> element sitsinside the <p> element.
![Page 25: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/25.jpg)
We will also use this CSS code.Note that the <em> element has
not been specified.
p { color: red; }
![Page 26: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/26.jpg)
In a browser, the <p> and <em>elements will both be colored
red.
<em> element
![Page 27: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/27.jpg)
But why is the <em> elementcolored red when it has not been
styled?
![Page 28: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/28.jpg)
Because the <em> element hasinherited the color property from
the <p> element.
![Page 29: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/29.jpg)
Why isinheritance
helpful?
![Page 30: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/30.jpg)
Inheritance is designed to makeit easier for authors.
![Page 31: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/31.jpg)
Otherwise we would need tospecify properties for alldescendant elements.
p { color: red; }p em { color: red; }
![Page 32: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/32.jpg)
CSS files would be much largerin size, harder to create andmaintain as well as slower to
download.
![Page 33: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/33.jpg)
Are all CSSpropertiesinherited?
![Page 34: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/34.jpg)
No. All CSS properties arenot inherited!
![Page 35: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/35.jpg)
If every CSS property wasinherited, it would make things
much harder for authors.
![Page 36: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/36.jpg)
Authors would have to turn offunwanted CSS properties for
descendant elements.
![Page 37: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/37.jpg)
For example, what would happenif the border property was
inherited by default…
![Page 38: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/38.jpg)
and we then applied a border tothe <p> element?
p { border: 1px solid red; }
![Page 39: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/39.jpg)
The <em> inside the <p> wouldalso have a red border.
<em> element
![Page 40: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/40.jpg)
Luckily, borders are notinherited, so the <em> would not
have a red border.
<em> element
![Page 41: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/41.jpg)
Generally speaking, onlyproperties that make our job
easier are inherited!
![Page 42: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/42.jpg)
So, whichproperties are
inherited?
![Page 43: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/43.jpg)
The following CSS properties areinherited…
![Page 44: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/44.jpg)
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
![Page 45: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/45.jpg)
Yikes! That is a lot of properties.
![Page 46: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/46.jpg)
To simply things, let’s take a lookat some of the
key groups of properties.
![Page 47: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/47.jpg)
Text-related properties that areinherited:
![Page 48: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/48.jpg)
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
![Page 49: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/49.jpg)
List-related properties that areinherited:
![Page 50: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/50.jpg)
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
![Page 51: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/51.jpg)
And, importantly, thecolor property is inherited:
![Page 52: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/52.jpg)
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
![Page 53: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/53.jpg)
Is font-sizeinherited?
![Page 54: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/54.jpg)
The simple answer is “yes”.However, font-size is inherited ina different way to many other
properties.
![Page 55: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/55.jpg)
Rather than the actual valuebeing inherited, the calculated
value is inherited.
![Page 56: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/56.jpg)
Before explaining how font-sizeinheritance works, we need to
look at whyfont-size is not directly
inherited.
![Page 57: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/57.jpg)
Let’s start with thesame sample of HTML code we
used earlier:
<p>Lorem <em>ipsum</em> dolor sit amet consect etuer.
</p>
![Page 58: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/58.jpg)
As before the <em>sits inside the <p>.
![Page 59: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/59.jpg)
Now, a font-size is applied to the<p> element only. The <em> has
not been specified.
p { font-size: 80%; }
![Page 60: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/60.jpg)
If the font-size value of 80% wereto be inherited, the
<em> would be sized to 80%of the <p> element…
![Page 61: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/61.jpg)
and the rendered documentwould look like this:
<em> element
![Page 62: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/62.jpg)
However, this is not the case!The <em> is the same size as the
<p>.
<em> element
![Page 63: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/63.jpg)
So how does inheritance work forfont-size?
![Page 64: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/64.jpg)
Let’s look at three examplesin action.
![Page 65: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/65.jpg)
We will use the same HTMLcode as before:
<p>Lorem <em>ipsum</em> dolor sit amet consect etuer.
</p>
![Page 66: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/66.jpg)
Which produces the samedocument tree as before.
![Page 67: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/67.jpg)
Example 1:Pixels
![Page 68: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/68.jpg)
The <p> element has been givena font-size of 14px.
Note: pixels are not recommended for sizing fonts due to accessibilityissues associated with older browsers such as IE5 and IE6.
p { font-size: 14px; }
![Page 69: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/69.jpg)
This pixel value (14px) overridesthe browsers default font-size
value (approx 16px). This newvalue is inherited by
descendants.
![Page 70: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/70.jpg)
element value calcuated value
default font size approx 16px
<body> unspecified approx 16px
<p> 14px 14px
<em> unspecified inherited value = 14px
So, the <em> element inherits the14px value.
![Page 71: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/71.jpg)
Example 2:Percentage
![Page 72: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/72.jpg)
The <p> element has been givena font-size of 85%.
p { font-size: 85%; }
![Page 73: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/73.jpg)
The browsers default font-size(16px) and the percentage value
(85%) are used to create acalculated value (16px x 85% =
13.6px). This calculated value isinherited by descendants.
![Page 74: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/74.jpg)
element value calcuated value
default font size approx 16px
<body> unspecified approx 16px
<p> 85% 16px x 85% = 13.6px
<em> unspecified inherited value = 13.6px
So, the <em> element inherits the13.6px calculated value.
![Page 75: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/75.jpg)
Example 3:EMs
![Page 76: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/76.jpg)
The <p> element has been givena font-size of .85em.
Note: Avoid using EMs for font-size values under 1em as IE5 renders thesevalues in pixels instead of EMs (.8em is rendered as 8px).
p { font-size: .85em; }
![Page 77: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/77.jpg)
The browsers default font-size(16px) and the EM value (.85em)are used to create a calculatedvalue (16px x .85em = 13.6px).
This calculated value isinherited by descendants.
![Page 78: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/78.jpg)
element value calcuated value
default font size approx 16px
<body> unspecified approx 16px
<p> .85em 16px x .85em = 13.6px
<em> unspecified inherited value = 13.6px
So, the <em> element inherits the13.6px calculated value.
![Page 79: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/79.jpg)
Those examples were too simple.What about more complexexamples using different
elements?
![Page 80: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/80.jpg)
Example 4:
![Page 81: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/81.jpg)
All elements have been specifiedusing percentage values.
body { font-size: 85%; }h1 { font-size: 200%; }h2 { font-size: 150%; }
![Page 82: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/82.jpg)
The browsers default font-size(16px) and the body percentagevalue (85%) are used to create acalculated value (16px x 85% =13.6px). This calculated value isinherited by descendants unless
new values are specified.
![Page 83: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/83.jpg)
element value calculated font-size
default font size approx 16px
<body> 85% 16px x 85% = 13.6px
<h1> 200% inherited value 13.6px x 200% = 27.2px
<h2> 150% inherited value 13.6px x 150% = 20.4px
<p> unspecified inherited value = 13.6px
<em> unspecified inherited value = 13.6px
The font-size inheritance inaction
![Page 84: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/84.jpg)
Using inheritancefor efficiency
![Page 85: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/85.jpg)
Authors can use inheritance towrite efficient CSS.
![Page 86: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/86.jpg)
For example, you can set thecolor, font-size and font-family on
the body element.
body { color: #222;font-family: arial, helvetica, sans-serif;font-size: 90%;
}
![Page 87: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/87.jpg)
These properties will be inheritedby all descendant elements.
![Page 88: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/88.jpg)
You can then override theproperties as needed, specifying
new color values...
![Page 89: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/89.jpg)
body { color: #222;font-family: arial, helvetica, sans-serif;font-size: 90%;
}
h1, h2, h3 { color: green; }h4, h5, h6 { color: black; }
![Page 90: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/90.jpg)
new font-family values...
![Page 91: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/91.jpg)
body { color: #222;font-family: arial, 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;
}
![Page 92: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/92.jpg)
and new font-size values asneeded.
![Page 93: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/93.jpg)
}
h1, h2, h3 { color: green; }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%; }
![Page 94: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/94.jpg)
Now, go forth andinherit the world!
![Page 95: CSS Inheritance - a simple step-by-step tutorial](https://reader034.fdocuments.net/reader034/viewer/2022052409/53f0abf08d7f72104c8b46c0/html5/thumbnails/95.jpg)
We’re done!