CSS: The Missing Manual

Tutorial: Inheritance

In this three-part tutorial, you'll see how inheritance works. First, you'll create a simple tag selector and watch it pass its characteristics on to nested tags. Then, you'll create a class style that uses inheritance to alter the formatting of an entire page. Finally, you'll see where CSS makes some welcome exceptions to the inheritance rule.

To get started, you need to download the tutorial files located on this book's companion Web site at http://www.sawmac.com/css/. Click the tutorial link and download the files. All of the files are enclosed in a ZIP archive, so you'll need to unzip them first. (Detailed instructions for unzipping the files are on the Web site.) The files for this tutorial are contained in the folder named chapter_04.

A Basic Example: One Level of Inheritance

To see how inheritance works, start by adding a single tag style and see how it affects the tags nested inside. The next two parts of this tutorial will build upon your work here, so save the file when you're done.

1. Open the file inheritance.html in your favorite text editor.

   Now add an internal style sheet to this file.

   Note

   In general, it's better to use external style sheets for a Web site, for reasons discussed in Chapter 2 (Section 2.2). But sometimes it's easier to start your CSS-based design in an internal style sheet, as in this example, and turn it into an external style sheet later.

2. Click directly after the closing </title> tag. Hit Enter (Return), and then type <style type="text/css"> .

   This opening style tag lets a Web browser know that CSS instructions are to follow.

   You need to create a style that applies to all <p> tags.

3. Press Enter (Return) and type p { .

   You've started creating a tag selector that applies to all <p> tags on the page.

4. Press Enter (Return) again, and then add one CSS property to create the style: color: #5f9794 ;

   As you've seen in the previous tutorials, the color property sets the color of text.

5. Complete the style by pressing Enter (Return), and then typing a closing bracket to mark the end of the style. At this point your completed style should look like this:

   	p {
   	    color: #5f9794;
   	}

   Finally, add the closing <style> tag to complete the style sheet.

6. Hit Enter (Return) to create a new, blank line, and then type </style> .

   Your style sheet is complete.

7. Open the page in a Web browser to preview your work.

   The color of the page's seven paragraphs has changed from black to teal (see Figure 4-3).

But notice how this <p> tag style affects other tags: Tags inside of the <p> tag also change color. For example, the text inside the <em> and <strong> tags changes to teal while maintaining its italic and bold formatting. This kind of behavior makes a lot of sense. After all, when you set the color of text in a paragraph, you expect all the text in the paragraph—regardless of any other tags inside that paragraph—to be the same color.

Without inheritance, creating style sheets would be very labor intensive. If the <em> and <strong> tags didn't inherit the color property from the <p> tag selector, then you'd have to create additional styles—perhaps descendent selectors like p em and p strong—to correctly format the text.

Using Inheritance to Restyle an Entire Page

Inheritance works with class styles as well—any tag with any kind of style applied to it passes CSS properties to its descendents. With that in mind, you can use inheritance to make quick, sweeping changes to an entire page.

Figure 4-3. Inheritance in action! Tags inside of a styled tag—the bold, italicized text—display the same color applied to the <p> tag surrounding them.

1. Return to your text editor and the inheritance.html file.

   You'll add a new style below the <p> tag style you created.

2. Click at the end of the closing brace of the p selector. Press Return to create a new line, and then type .pageStyle { .

   You're about to create a new class style that you'll apply to the body tag.

3. Hit Enter (Return) again, and then add the following list of properties to the style:

   	font-family: Arial, Helvetica, sans-serif;
   	font-size: 1em;
   	color: #fdd041;

4. Finally complete the style by pressing Enter (Return) and typing the closing brace. The whole thing should look like this:

   	.pageStyle {
   	    font-family: Arial, Helvetica, sans-serif;
   	    font-size: 1em;
   	    color: #fdd041;
   	}

   This completed class style sets a font, font-size, and color for the body tag. But thanks to inheritance, all tags inside of the body tag (which are also all the tags visible inside a browser window) use the same font.

5. Find the opening <body> tag (just a couple lines below the style you just created), and then type class="pageStyle".

   The tag should now look like this: <body class="pageStyle">. It applies the class to the body tag.

6. Save and preview the Web page in a browser.

   As you can see in Figure 4-4, your class style has created a seamless, consistent appearance throughout all text in the body of the page. Both headings and paragraphs inside the <body> tag have taken on the new font styling.

The page as a whole looks great, but now look more closely: The color change affected only the headings and the font-size change affected only the paragraphs. How did CSS know that you didn't want your headings to be the same 1em size as the body text? And why didn't the nested <p> tags inherit your new color styling from the <body> tag?

You're seeing the "Cascading" aspect of Cascading Style Sheets in action. In this example, your <p> tags have two color styles in conflict—the <p> tag style you created in Section 4.4.2 and the <body> class style you created here. When styles collide, the browser has to pick one. As discussed in Section 5.2, the browser uses the more specific styling—the color you assigned explicitly for <p> tag. You'll learn much more about the rules of the cascade in the next chapter.

Inheritance Inaction

Inheritance doesn't always apply and that isn't necessarily a bad thing. For some properties, inheritance would have a negative effect on a page's appearance. You'll see another example of inheritance inaction in the final section of this tutorial. Margin styles don't get inherited by descendent tags—and you wouldn't want them to, as you'll see in this example.

1. Enter (Return) to your text editor and the inheritance.html file.

   You'll expand on the p tag style you just created.

   

   Figure 4-4. A style applied to the body tag passes its properties onto all the tags you see in the Web browser, making it easy to apply global formatting effects to a page.

2. Locate the p style, click at the end of the color property (color :#5f9794;), and then press Enter (Return) to create a new line.

   You'll indent the paragraphs on the page by adding a left margin.

3. Type margin-left: 50px;. The style should now look like this:

   	p {
   	    color: #5f9794;
   	    margin-left: 50px;
   	}

   The margin-left property indents the paragraph 50px from the left.

4. Save the file and preview it in a Web browser.

   Notice that all of the <p> tags are indented 50px from the left edge of the browser window, but that tags inside the <p> tag (for example, the <em> tag) don't have any additional indentation (see Figure 4-5). This behavior makes sense: It would look weird if there was an additional 50px of space to the left of each <em> and each <strong> tag inside of a paragraph!

Figure 4-5. While most properties are inherited (like font color), there are plenty—like margins—that don't pass on to nested tags. The CSS Property Reference in Appendix A indicates which properties are and are not inherited.

Note

You can find a completed version of the page you created in this tutorial in the chapter_04_finished folder.