CSS: The Missing Manual

Tutorial: The Cascade in Action

In this tutorial, you'll see how styles interact and how they can sometimes conflict to create unexpected results. First, you'll create two styles and see how some properties are inherited and how others are overruled by the cascade. Then you'll see how inheritance affects tags on a page, and how a browser resolves any CSS conflicts. Finally, you'll learn how to troubleshoot problems created by the cascade.

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. (Go to the Web site for detailed instructions on unzipping the files.) The files for this tutorial are contained inside the folder named chapter_05.

Creating a Hybrid Style

In this example, you'll create two styles. One style formats all the paragraphs of the page; and another, more specific style, reformats two paragraphs in a particular spot on the page.

1. Using your favorite text or Web page editor, open the file cascade.html located in the chapter_05 folder.

   You'll start by creating an internal style sheet. (See Sections 11.7.2 and 3.8 for more on internal and external style sheets and when to use which.)

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

   It's a good idea to write both the opening and closing style tags before you start ...