206

CSS Inheritance

Slide instructions

SPACEBAR to move forward through slides.

SHIFT & SPACEBAR to move backwards through slides.

LEFT ARROW & RIGHT ARROW to move through sections.

ESC to see overview and ESC again to exit.

F to enter presentation mode and ESC to exit.

Introduction

CSS inheritance allows some CSS properties to be passed down from parent elements to descendant elements.

1. Inheritance in action

To see inheritance in action, let’s look at an  (child) element inside a  (parent) element.

Document tree with parent paragraph and child emphasis element

This would produce the following HTML markup:

<html>
  <head>
    <title>Document title</title>
  </head>
  <body>
    <p>
      Lorem <em>ipsum</em> dolor etuer.
    </p>
  <body>
</html>

What would happen if you style the  element to color: red?

/* basic CSS rule */
p {
  color: red;
}

In a browser, the  and  elements will both be colored red.

However, why is the  element colored red when it has not been given any style of its own?

Because the  element (the child element) has inherited the color property from the  element (the parent element).

Exercise 1: Apply color to the paragraph

Open this HTML file in an editor:
exercises-start/exercise-206-01.html

Write a CSS rule to style the  element with a color value of chocolate.


/* Add styles here */
p {
  color: chocolate;
}

Notice how the color value is inherited by the  element inside the  element.

Check your work against the finished HTML file:
exercises-finished/exercise-206-01.html

2. Why is inheritance useful?

Inheritance is designed to make it easier for authors. Otherwise, you would need to style all descendant elements as well as their parents.

For example, you would need to style the  element inside the  element as well so that it was also red.

/* if inheritance didn’t exist */
p {
  color: red;
}

p em {
  color: red;
}

CSS files would be much larger, harder to create and harder to maintain.

3. Are all properties inherited?

Many CSS properties are not inherited. If all CSS properties were inherited, it would make things much harder for authors.

Authors would have to turn off unwanted CSS properties for descendant elements.

For example, what would happen if the border property was inherited by default, and you applied a border to the  element?

/* adding border to the p element */
p {
  border: 1px solid red;
}

The  inside the  would also have a red border - even though you may not want this to occur.

Then you would need to specifically turn off the border if you didn’t want it to appear for the  element.

/* turn off the border */
p {
  border: 1px solid red;
}

p em {
  border: 0;
}

Luckily, the border property is not inherited, so the  would not have a red border.

Generally speaking, only properties that make your job easier are inherited!

Exercise 2: Apply a border to the paragraph

Open this HTML file in an editor:
exercises-start/exercise-206-02.html

Write a CSS rule to style the  element with border: 1px solid red.


/* Add styles here */
p {
  border: 1px solid red;
}

Notice how the border value is not inherited by the  element inside the  element.

Check your work against the finished HTML file:
exercises-finished/exercise-206-02.html

4. Which properties are inherited?

The following CSS2.1 properties are inherited:

p { azimuth: value; }
p { border-collapse: value; }
p { border-spacing: value; }
p { caption-side: value; }
p { color: value; }
p { cursor: value; }
p { direction: value; }
p { elevation: value; }
p { empty-cells: value; }
p { font-family: value; }

p { font-size: value; }
p { font-style: value; }
p { font-variant: value; }
p { font-weight: value; }
p { font: value; }
p { letter-spacing: value; }
p { line-height: value; }
p { list-style-image: value; }
p { list-style-position: value; }

p { list-style-type: value; }
p { list-style: value; }
p { orphans: value; }
p { pitch-range: value; }
p { pitch: value; }
p { quotes: value; }
p { richness: value; }
p { speak-header: value; }
p { speak-numeral: value; }
p { speak-punctuation: value; }

p { speak: value; }
p { speech-rate: value; }
p { stress: value; }
p { text-align: value; }
p { text-indent: value; }
p { text-transform: value; }
p { visibility: value; }
p { voice-family: value; }
p { volume: value; }
p { white-space: value; }

p { widows: value; }
p { word-spacing: value; }

This list might seem a bit overwhelming, so Let’s focus on some of the key groups of properties.

All text-related properties are inherited.

p { font-family: value; }
p { font-size: value; }
p { font-style: value; }
p { font-variant: value; }
p { font-weight: value; }
p { font: value; }
p { letter-spacing: value; }
p { line-height: value; }
p { orphans: value; }

p { text-align: value; }
p { text-indent: value; }
p { text-transform: value; }
p { widows: value; }
p { word-spacing: value; }

All list-related properties are inherited.

p { list-style-image: value; }
p { list-style-position: value; }
p { list-style-type: value; }
p { list-style: value; }

And, importantly, the color property is also inherited.

p { color: value; }

5. Font-size inheritance

The font-size property is inherited in a different way to many other properties.

Before explaining how font-size inheritance works, let’s look at why font-size is not directly inherited using the previous example.

<html>
  <head>
    <title>Document title</title>
  </head>
  <body>
    <p>
      Lorem <em>ipsum</em> dolor etuer.
    </p>
  <body>
</html>

By default, the <body> element has a font-size of approximately 16px.

What would happen if you set the  element to a font-size of 80%?

/* setting the font-size */
body {
  font-size: 100%;
}

p {
  font-size: 80%;
}

The  element would be 80% x 16px which would be a font-size of 12.8px.

Element	Calculation	Final value
`<body>`	`16px x 100%`	`16px`
`<p>`	`16px x 80%`	`12.8px`

But what would happen to the  element inside the  element?

If the font-size value of 80% were to be inherited, the  would be 80% of the  element and would be a font-size of 10.24px.

Element	Calculation	Final value
`<body>`	`16px x 100%`	`16px`
`<p>`	`16px x 80%`	`12.8px`
`<em>`	`12.8px x 80%`	`10.24px`

However, this is not the case! The  is the same size as the . So how does inheritance work for font-size?

The answer is that the calculated value is inherited, rather than the value itself.

If the  element is given a font-size of 80%, the calculated value of 12.8px is then passed on to the  element.

Element	Calculation	Final value
`<body>`	`16px x 100%`	`16px`
`<p>`	`16px x 80%`	`12.8px`
`<em>`	Unspecified	Inherited value: `12.8px`

Exercise 3: Apply a font-size to the paragraph

Open this HTML file in an editor:
exercises-start/exercise-206-03.html

Write a CSS rule to style the  element with font-size: 80%.


/* Add styles here */
p {
  font-size: 80%;
}

Notice how the font-size value does not affect the  element inside the  element. The  element is not smaller than the  element.

Check your work against the finished HTML file:
exercises-finished/exercise-206-03.html

6. Using inheritance for efficiency

Authors can use inheritance to write efficient CSS.

For example, you can set the font-size and font-family on the <body> element.

body {
  font-family:
    arial, helvetica, sans-serif;
  font-size: .9em;
}

These properties will be inherited by all descendant elements.

You can then override the properties as needed.

In the following example, the heading elements have been given different font-size and font-family values - overriding the <body> values.

body {
  font-family:
    arial, helvetica, sans-serif;
  font-size: .9em;
}

body {
h1,
h2 {
  font-family:
    georgia, times, serif;
}

h1 { font-size: 2em; }
h2 { font-size: 1.8em; }

Exercise 4: Apply font-size and font-family

Open this HTML file in an editor:
exercises-start/exercise-206-04.html

Write a CSS rule to style the <body> element with font-family: arial, helvetica, sans-serif and font-size: 1em.


/* Add styles here */
body {
  font-family:
    arial, helvetica, sans-serif;
  font-size: 1em;
}

Write a second CSS rule to style the <h1> and <h2> elements with font-family: georgia, times, serif.


/* Add styles here */
h1,
h2 {
  font-family:
    georgia, times, serif;
}

Write a third CSS rule to style the <h1> element with font-size: 2.5em.


/* Add styles here */
h1 {
  font-size: 2.5em;
}

Write a fourth CSS rule to style the <h2> element with font-size: 1.5em.


/* Add styles here */
h2 {
  font-size: 1.5em;
}

Check your work against the finished HTML file:
exercises-finished/exercise-206-04.html

Russ Weakley

Site Twitter Github Slideshare Linkedin

Next deck

207: CSS Cascade