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"> ...