Inheritance - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

19
Inheritance

Inheritance is an efficiency feature of CSS. It means you have to write far less code.

In order to understand inheritance, you need to understand that an HTML page is organized into parents and children. A child element of a parent element is any element that’s enclosed by the parent element.

Let’s start with the uber-parent. In an HTML document, the parent of all the content that displays on the page is <body>. Everything on the page is a child of <body>, because every element is enclosed by the <body> tags. (Both <head> and <body> have a parent, <html>, but we’re not concerned with that now.)

Look at the simplified webpage from Chapter 2.

<html>
<head>
<title>Practice</title>
</head>
<body>
<p>Mark Myers</p>
<p>That’s my name.</p>
</body>
</html>

The two paragraphs, like everything else we might add to the page, are enclosed by the opening and closing <body> tags, so they are all children of <body>. As the body element’s children, they inherit all the CSS properties of that element. So, for example, if we style the body element like this…

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
color: darkslategray;
}

…all the text on the page will display in Georgia or one of the alternatives, at 1.2 times the default size, and in gray. Paragraphs will be in Georgia or one of its alternatives. So will headings. All text will be based on a “normal” text size of 1.2 times the browser’s default text size. All text, whether paragraphs or headings, will be gray. Unless…

…you override the inheritance.

For example, if you include this style in your CSS…

h2 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}

…it overrides the inherited font-family, Georgia or its relatives, and styles all h2 headings in Trebuchet or its relatives. Since you haven’t specified any overriding styles for size or color, the h2 headings will inherit these styles as specified for the parent, the body element. h2 headings will be 120% the size of the default for h2 headings, and they’ll be gray. Of course, you can override these inherited styles as well, for example:

h2 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: .5em;
color: black;
}

Now we’ve overridden all the inherited styles.

When you override an inherited size with an em value as in the code above, the new em value is relative to the inherited size. The style that the h2 heading in the code above inherits from the body element is 1.2em—1.2 times the default text size. So when we style the h2 heading at.5em, we’re saying, “Make h2 headings half the inherited size.” The inherited size, thanks to the style of the body element, is 1.2 times the default size. Half of that size, specified by .5em, is .6 times the default size.

That’s pretty confusing, which is why many developers specify 1em for font-size in the body style. That makes it clear that all em values specified for other elements will be relative to the browser’s default size.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/19.html