Section 5.4. Tutorial: The Cascade in Action


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

5.4.1. 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 adding styles. This will help you avoid the sometimes common problem of forgetting to add the closing style taga mistake that leads to all sorts of weird display problems in Web browsers.

  3. Press Enter (Return) twice, and then type </style> .

    Now you'll add a basic tag style to format the paragraphs of text on the page.

  4. Place your cursor in the empty line between the opening and closing style tags. Type the following style :

     p {    font-family: Arial, Helvetica, sans-serif;    font-size: .9em;    line-height: 175%;    color: #73AFB7; } 

    The CSS line-height property sets the leading or space between lines of text. (See Section 6.4 for more on this property.)

  5. Preview the page in a Web browser .

    All of the paragraphs should be formatted using Arial, and a light blue color. There should also be a greater-than-usual amount of space between each line in a paragraph. That's the line-height property in action.

    Next, you'll create a style for the paragraphs that appear inside a special area of the pagea <div> tag with an ID of note . (The <div> is already part of the HTML of this page.)

  6. Return to your Web page editor, click directly after the end of the new <p> tag style, and press Enter (Return) to create an empty line. Add the following style :

     #note p {     line-height: normal;     color: #993366; } 

    You've just created a descendent selector (Section 3.1) that formats all <p> tags that appear inside of a tag with an ID of note applied to it. In other words, only the paragraphs that are inside the <div> on this page are affected by these instructions.

    Notice that this style has two propertiesline-height and colorthat conflict with the instructions provided in the p style you created earlier. To see how a browser deals with this conflict, you'll preview the page.

  7. Preview the page once again in a Web browser .

    You'll notice that the two paragraphs that appear below the headline "Just Say No To Bamboo" are purple, and that the paragraphs are less spaced out than other paragraphs on the page. Their line-height's also smaller than the other paragraphs.

    Because the #note p style is more specific , its properties are more important than the simple p style. So in the case where there's a conflictthe line-height and colorthe #note p properties win out.

    However, since #note p doesn't assign values to the font-family or font-size properties, those properties in the p tag style are applied to the two paragraphs. According to the rules of the cascade, properties from multiple stylesthe p and #note p stylescombine to create a hybrid style.

5.4.2. Combining Cascading and Inheritance

CSS properties can accumulate or add-up due to inheritance as well. In other words, as a tag inherits properties from surrounding tags (its ancestors ), those properties mix (and perhaps conflict) with styles purposely applied to the tag. You'll create a style that will be inherited by all the tags on the page, and you'll see how, in the case of conflicts, some properties from that style are ignored.

  1. Return to your Web page editor and the cascade.html file .

    You'll now add a new tag style for the <body> tag.

  2. Add the following style to the internal style sheet below the #note p style you just added :

     body {     color: #000066;     letter-spacing: 1px; } 

    This sets an overall text color for the page, and adds one pixel of space between each letter, spreading the letters out a little on the page. Both these properties are inherited, so any tags inside the <body> tag will display these properties.

  3. Preview the page in a Web browser to see the effect (see Figure 5-5) .

    Notice that the letters that appear in the headlines and paragraphs are spaced apart a small amount, creating an airy quality to the text. That's the effect of all of the tags inheriting the letter-spacing property.

    However, the color property, although inherited by the paragraph tags, isn't applied to them because it conflicts with more specific rulesthe color properties set in the p and #note p styles.

    Figure 5-5. Inheritance also affects the cascade by passing on properties to descendent tags. Web browsers follow the rules of the cascade to determine which properties should be applied to each particular tag.

    As you can see, understanding exactly why a tag is formatted the way it is requires understanding of the cascade and inheritance, as well as a little bit of detective work to trace the origin of each property that a Web browser applies to a tag on the page. For example, the paragraphs inside the <div> tag are formatted using properties from three different styles (see Figure 5-6).

5.4.3. Overcoming Conflicts

Because of how CSS properties sometimes conflict when several styles apply to the same tag, you'll sometimes find your pages don't look exactly as you planned.

Figure 5-6. Due to inheritance and the cascade, a single tag on a page can get its properties from multiple CSS styles, creating a hybrid style. The final appearance of the two paragraphs below the headline beginning "Just Say No" (see Figure 5-5) comes from properties of three styles listed in this diagram from least to most specific (top to bottom). The crossed-out properties are overridden by more specific styles.

When that happens you'll need to do a little work to find out why, and rejigger your CSS selectors to make sure the Cascade is working to produce the results you want.

  1. Return to your Web page editor and the cascade.html file .

    You'll now create a new style that you'll use to highlight the introductory paragraph of the #note section.

  2. Add the following style to the internal style sheet below the body tag style you created in Section 5.4.2 :

     .intro {     font-weight: bold;     color: #FF0000; } 

    Next, you'll apply this class style to a tag.

  3. Locate the <p> tag that appears directly below <h2>Just Say No To Bamboo</h2> , and then add the following class attribute :

     <p  class="intro"  > 

  4. Preview the page in a Web browser .

    You'll notice that the paragraph turns bold, but the text color remains the same as the other paragraph inside the <div>.

    What gives? Following the rules of the cascade, .intro is a basic class selector, while the #note p is a descendent selector composed of both an ID and a tag name . These add up to create a more specific style, so its style properties overrule any conflict between it and the .intro style.

    In order to make the .intro style work, you'll need to give it a little juice by making its selector more powerful.

  5. Return to the cascade.html file in your Web page editor and change the name of the style from .intro to #note p.intro .

    Now you have a descendent selector composed of an ID, a tag, and a class. This style's more specific than #note p and its properties override those in any less specific style.

  6. Preview the page in a Web browser .

    Voila! The paragraph changes to bright red. If you didn't have a clear understanding of the cascade, you'd be scratching your head wondering why the color property didn't work.

In this and the previous four chapters, you've covered the basics of CSS. Now, in Part 2, it's time to take that knowledge and apply it to real design challenges, making Web pages look great.



CSS[c] The Missing Manual
Dreamweaver CS3: The Missing Manual
ISBN: 0596510438
EAN: 2147483647
Year: 2007
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net