CSS Inheritance
-
Upload
rihards-kubilis -
Category
Documents
-
view
221 -
download
0
Transcript of CSS Inheritance
-
8/6/2019 CSS Inheritance
1/95
CSSINHERITANCE
-
8/6/2019 CSS Inheritance
2/95
Lets startwith the
document
tree
-
8/6/2019 CSS Inheritance
3/95
Before we explore inheritance, we
need to understand thedocument tree.
-
8/6/2019 CSS Inheritance
4/95
All HTML documents are trees.
-
8/6/2019 CSS Inheritance
5/95
Document trees are made from
HTML elements.
-
8/6/2019 CSS Inheritance
6/95
The document tree is just like
yourfamily tree.
-
8/6/2019 CSS Inheritance
7/95
An ancestorrefers to any
element that is connected butfurther up the document tree.
Ancestor
-
8/6/2019 CSS Inheritance
8/95
A descendant refers to any
element that is connected butlower down the document tree.
Descendant
Descendants
-
8/6/2019 CSS Inheritance
9/95
A parent is an element that is
connected & directly above anelement in the document tree.
Parent
-
8/6/2019 CSS Inheritance
10/95
A child is an element that is
connected & directly below anelement in the document tree.
Child
-
8/6/2019 CSS Inheritance
11/95
A sibling is an element that
shares the same parent asanother element.
Parent
Siblings
-
8/6/2019 CSS Inheritance
12/95
Next, a bit
about
CSS rules
-
8/6/2019 CSS Inheritance
13/95
We also need to understand the
basics of CSS rules beforeexploring inheritance.
-
8/6/2019 CSS Inheritance
14/95
-
8/6/2019 CSS Inheritance
15/95
CSS rules are made up of
five components.
-
8/6/2019 CSS Inheritance
16/95
The selector"selects" the
elements on an HTML page thatare affected by the rule.
p { color: red; }
Selector
-
8/6/2019 CSS Inheritance
17/95
The declaration block is a
container that consists ofanything between (and including)
the brackets.
p { color: red; }
Declaration block
-
8/6/2019 CSS Inheritance
18/95
The declaration tells a browser
how to render any element on apage that is selected.
p { color: red; }
Declaration
-
8/6/2019 CSS Inheritance
19/95
The property is the aspect of that
element that you are choosing tostyle.
p { color: red; }
Property
-
8/6/2019 CSS Inheritance
20/95
The value is the exact style you
wish to set for the property.
p { color: red; }
Value
-
8/6/2019 CSS Inheritance
21/95
Now
what is
inheritance?
-
8/6/2019 CSS Inheritance
22/95
Inheritance is where specific CSS
properties are passed down todescendant elements.
-
8/6/2019 CSS Inheritance
23/95
To see inheritance in action, we
will use the HTML code below:
Loremipsum dolor
sit ametconsect etuer.
-
8/6/2019 CSS Inheritance
24/95
Note that the element sits
inside the
element.
-
8/6/2019 CSS Inheritance
25/95
We will also use this CSS code.
Note that the element hasnot been specified.
p { color: red; }
-
8/6/2019 CSS Inheritance
26/95
-
8/6/2019 CSS Inheritance
27/95
But why is the element
coloredred when it has not beenstyled?
-
8/6/2019 CSS Inheritance
28/95
Because the element has
inherited the color property fromthe
element.
-
8/6/2019 CSS Inheritance
29/95
Why is
inheritance
helpful?
-
8/6/2019 CSS Inheritance
30/95
-
8/6/2019 CSS Inheritance
31/95
Otherwise we would need to
specify properties foralldescendant elements.
p { color: red; }
p em { color: red; }
-
8/6/2019 CSS Inheritance
32/95
CSS files would be much larger
in size, harder to create andmaintain as well as slower to
download.
-
8/6/2019 CSS Inheritance
33/95
Are all CSS
properties
inherited?
-
8/6/2019 CSS Inheritance
34/95
No. All CSS properties are
not inherited!
-
8/6/2019 CSS Inheritance
35/95
If every CSS property was
inherited, it would make thingsmuch harderfor authors.
-
8/6/2019 CSS Inheritance
36/95
-
8/6/2019 CSS Inheritance
37/95
For example, what would happen
if the border property wasinherited by default
-
8/6/2019 CSS Inheritance
38/95
and we then applied a borderto
the
element?
p { border: 1px solid red; }
-
8/6/2019 CSS Inheritance
39/95
The inside the
would
also have a red border.
element
-
8/6/2019 CSS Inheritance
40/95
Luckily, borders are not
inherited, so the would nothave a red border.
element
-
8/6/2019 CSS Inheritance
41/95
Generally speaking, only
properties that make our jobeasierare inherited!
-
8/6/2019 CSS Inheritance
42/95
So, which
properties are
inherited?
-
8/6/2019 CSS Inheritance
43/95
The following CSS properties are
inherited
-
8/6/2019 CSS Inheritance
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
-
8/6/2019 CSS Inheritance
45/95
Yikes! That is a lot of properties.
-
8/6/2019 CSS Inheritance
46/95
To simply things, lets take a look
at some of thekey groups of properties.
-
8/6/2019 CSS Inheritance
47/95
-
8/6/2019 CSS Inheritance
48/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
-
8/6/2019 CSS Inheritance
49/95
-
8/6/2019 CSS Inheritance
50/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
-
8/6/2019 CSS Inheritance
51/95
And, importantly, the
color property is inherited:
-
8/6/2019 CSS Inheritance
52/95
-
8/6/2019 CSS Inheritance
53/95
Is font-size
inherited?
-
8/6/2019 CSS Inheritance
54/95
The simple answer is yes.
However, font-size is inherited ina different way to many other
properties.
-
8/6/2019 CSS Inheritance
55/95
Rather than the actual value
being inherited, the calculatedvalue is inherited.
-
8/6/2019 CSS Inheritance
56/95
-
8/6/2019 CSS Inheritance
57/95
-
8/6/2019 CSS Inheritance
58/95
-
8/6/2019 CSS Inheritance
59/95
Now, a font-size is applied to the
element only. The hasnot been specified.
p { font-size: 80%; }
-
8/6/2019 CSS Inheritance
60/95
If the font-size value of 80% were
to be inherited, the would be sized to 80%
of the
element
-
8/6/2019 CSS Inheritance
61/95
and the rendered document
would look like this:
element
-
8/6/2019 CSS Inheritance
62/95
However, this is not the case!
The is the same size as the
.
element
-
8/6/2019 CSS Inheritance
63/95
So how does inheritance work for
font-size?
-
8/6/2019 CSS Inheritance
64/95
Lets look at three examples
in action.
W ill th HTML
-
8/6/2019 CSS Inheritance
65/95
We will use the same HTML
code as before:
Loremipsum dolor
sit ametconsect etuer.
Whi h d th
-
8/6/2019 CSS Inheritance
66/95
Which produces the same
document tree as before.
-
8/6/2019 CSS Inheritance
67/95
Example 1:
Pixels
Th < > l t h b i
-
8/6/2019 CSS Inheritance
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; }
-
8/6/2019 CSS Inheritance
69/95
So the < > element inherits the
-
8/6/2019 CSS Inheritance
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.
-
8/6/2019 CSS Inheritance
71/95
Example 2:
Percentage
The
element has been given
-
8/6/2019 CSS Inheritance
72/95
The
element has been given
a font-size of85%.
p { font-size: 85%; }
The browsers default font size
-
8/6/2019 CSS Inheritance
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
-
8/6/2019 CSS Inheritance
74/95
element value calcuated value
default font size approx 16px
unspecified approx 16px
85% 16px x 85% = 13.6px
unspecified inherited value = 13.6px
So, the element inherits the
13.6px calculated value.
-
8/6/2019 CSS Inheritance
75/95
Example 3:
EMs
The
element has been given
-
8/6/2019 CSS Inheritance
76/95
The
element has been given
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; }
The browsers default font-size
-
8/6/2019 CSS Inheritance
77/95
The browsers default font-size
(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
-
8/6/2019 CSS Inheritance
78/95
element value calcuated value
default font size approx 16px
unspecified approx 16px
.85em 16px x .85em = 13.6px
unspecified inherited value = 13.6px
So, the element inherits the
13.6px calculated value.
Those examples were too simple
-
8/6/2019 CSS Inheritance
79/95
Those examples were too simple.
What about more complexexamples using different
elements?
-
8/6/2019 CSS Inheritance
80/95
Example 4:
-
8/6/2019 CSS Inheritance
81/95
The browsers default font-size
-
8/6/2019 CSS Inheritance
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
-
8/6/2019 CSS Inheritance
83/95
element value calculated font-size
default font size approx 16px
85% 16px x 85% = 13.6px
200% inherited value 13.6px x 200% = 27.2px
150% inherited value 13.6px x 150% = 20.4px
unspecified inherited value = 13.6px
unspecified inherited value = 13.6px
The font size inheritance in
action
-
8/6/2019 CSS Inheritance
84/95
Using inheritance
for efficiency
Authors can use inheritance to
-
8/6/2019 CSS Inheritance
85/95
Authors can use inheritance to
write efficient CSS.
For example, you can set the
-
8/6/2019 CSS Inheritance
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%;
}
-
8/6/2019 CSS Inheritance
87/95
You can then override the
-
8/6/2019 CSS Inheritance
88/95
properties as needed, specifyingnew color values...
body {
color: #222;
f f il i l
-
8/6/2019 CSS Inheritance
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...
-
8/6/2019 CSS Inheritance
90/95
y
body {color: #222;
font-family: arial,
-
8/6/2019 CSS Inheritance
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
-
8/6/2019 CSS Inheritance
92/95
needed.
}
h1, h2, h3 { color: green; }
h4 h5 h6 { color black }
-
8/6/2019 CSS Inheritance
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
-
8/6/2019 CSS Inheritance
94/95
inherit the world!
-
8/6/2019 CSS Inheritance
95/95
Were done!