Section 6.5. More about Styles | Dreamweaver 8[c] The Missing Manual

6.5. More about Styles

As you begin to pile styles onto your pages, you may notice some peculiar behaviors as styles start to interact. The rules governing these interactions can be complex, but they boil down to two main concepts: inheritance and cascading .

6.5.1. Inheritance

Imagine that you've created a new style by redefining the paragraph tag (<p>). This style has a font type of Arial, is red, and is 24 pixels tall. Then you select a single word in a paragraph and apply bold formatting to it. When you use the Property inspector's bold button to do this, Dreamweaver quietly wraps that word in a pair of <strong> HTML tags.(Dreamweaver doesn't use the <b> tag when making text boldsee Section 3.3.2.)

When a browser loads the page, it formats all paragraphs in Arial, red, 24 pixels, because that's how you defined the <p> tag. But what happens when the browser suddenly encounters the <strong> tag? Since you didn't redefine the <strong> tag in red, Arial, 24 pixels, the browser scratches its little silicon head: should the browser just resort to the default font, size , and color when it gets to the <strong> tag?

No, of course not. The bolded word should look just like the rest of the paragraphArial, red, 24 pixelsbut be bold, too . And indeed, that's how Cascading Style Sheets work: the <strong> tag inherits the formatting of the surrounding <p> tag.

Just as human babies inherit traitseye color, for examplefrom their biological parents, nested HTML tags inherit the properties of tags that surround them. A tag that's nested inside of another tagthat <strong> tag inside the <p> tag, for exampleis called a child , while the enclosing tag is called the parent .

Note: In CSS-speak, a tag inside another tag is also called a descendent , while a tag that surrounds another tag is called an ancestor .

Inheritance passes from parent to child. So, in this example, the <p> tag (the parent) passes on the Arial font, red color, and 24 pixel size to the <strong> tag (the child). But just as children have their own unique qualities, the <strong> tag adds its own qualityboldnessto the properties of its parent.

Note: Inheritance applies to all styles, not just HTML tag styles. If you apply a class style, for example, to a <td> (table cell ) tag, all tags inside the cellparagraphs, images, and so oninherit the properties of the class style.

Inheritance comes in quite handy at times. For instance, say you want to display all text on a page (paragraphs, headings, unordered lists, and links) using the Verdana font. You could, of course, knock off for the week and redefine every HTML tag used to format text<h1>, <h2>, <p>, <a>, <ul>, and so onor create a class style and then manually apply it to all text on the page.

Tip: For more information on inheritance, the Web offers some useful articles. For example,www.creativepro.com/story/feature/14776.html?origin=storytakes you through the ins and outs of basic inheritance. The article at www.brainjar.com/css/using/default3.aspoffers specific code examples. And www.ddj.com/documents/s=2370/nam1011137269/index.htmlis called "Style Inheritance: Friend and Foe, "which speaks for itself.

However, a better and faster technique is to take advantage of inheritance. Every Web page contains a <body> tag, which contains all the elements of your page. The <body> tag, therefore, is the parent of all HTML you see in a pageimages, paragraphs, headings, and so on. To quickly format all text, you could create an HTML tag style for the <body> tag using Verdana, or create a class style using that font and apply it to the <body> tag. Every bit of text inside the bodyall childrenthen inherit the Verdana font property.

Note: Actually, not all CSS properties are inherited. For the most part, these are logical exclusions: For example, say you created a border around an unordered list to visually set it off in its own box. If the border property were inherited, then all the elements inside the unordered listlike list items, links, or bolded wordswould each have their own box drawn around them as well. Use Dreamweaver's built-in CSS Reference to see which properties aren't inherited (see Section 9.6).

6.5.2. Cascading

At times, styles can conflict. Let's say you redefine the <h1> tag in an external style sheet, so that all <h1> tags show up in red, using the Arial font. But now you attach this external style sheet to a Web page that already has an internal style sheet, whose <h1> tag style has been set to Times, 24 pixels.

When a Web browser has to display any text formatted as a Heading 1 paragraph, it runs into a little dilemma. The page has two different stylestwo sets of formatting rulesfor the same tag . So which does the browser choose: the style from the internal style sheet or the style from the external style sheet?

The answer is both. The browser merges the two styles into a sort of hybrid, following these rules:

Properties that don't conflict are applied as usual. In the above example, the red color property exists only in the external style, while only the internal style specifies a font size . So far, the browser knows that, for this page, text inside <h1> tags should be both red and 24 pixels tall.
When properties do conflict, a Web browser uses the property from the " closest " or more specific style. External styles (since they're in a separate file) aren't as specific as the internal styles, which were created specifically to style this one page. In this case, the font Times (specified in the <h1> tag style in the internal style sheet) wins.

To summarize this example, then: the Web browser determines that text inside an <h1> tag on this Web page should be Times, red, 24 pixels tall.

This cascading effect applies to all styles, including class styles and the advanced styles discussed on Section 6.6. When there's a direct conflict between properties from a class style and an HTML tag style, the class style prevails. Because class styles must be applied directly to a tag<h1class="special Headline">they are considered more specific than HTML tag styles. After all, you added the style to a specific instance of the <h1> tag on the page.

Note: In the CSS version of "rock, paper, scissors," HTML text formatting beats CSS formatting. So if you add new, improved CSS styles to old Web pages that include out-of-date HTML formatting, your CSS styles won't work. To eliminate this conflict, remove the <font> tag from the page's code using Dreamweaver's Search and Replace tool (see Section 18.3) or the Clean Up HTML/XHTML command (page518).

These same rules apply when child elements inherit properties from parent elements, as described on Section 6.5. For example, if you apply a purple, Arial font class style to the body of a page, then the child elements (anything within the <body> tag) inherit those properties. If you then redefine the paragraph tag so that paragraph text is green, paragraph text inherits the Arial font from the body, but ignores the purple color in favor of the green you specified when redefining its ownparagraphtag.

To learn more than you probably ever wanted to know about cascading, visit the following Web pages:

www.blooberry.com/indexdot/css/topics/cascade.htm
http://nemesis1.f2o.org/aarchive?id=4
www.w3.org/TR/REC-CSS2/cascade.html#cascade

6.5.3. The Other Side of the CSS Style Panel

If you haven't yet set this book aside in hopes that the swelling in your brain will subside, you've probably absorbed the notion that the application of style properties is quite complex. With all this inheritance and cascading going on, it's very easy for styles to collide in unpredictable ways. To help you discern how styles interact and ferret out possible style conflicts, Dreamweaver 8 adds another view to the CSS Styles panel (see Figure 6-12). By clicking the Current button, the panel switches to Current Selection mode, which provides insight into how a selected item on a pagean image, a paragraph, or a tableis affected by inherited styles.

Tip: You can also switch the CSS Styles panel into Current Selection mode by selecting text on a page, and then clicking the new CSS button on the Property inspector. Doing so also opens the CSS panel, if it's closeda nice shortcut. If the button's "grayed out," then the CSS panel is already opened in this mode.

Current Selection mode is really an incredible tool that's invaluable in diagnosing weird CSS behavior associated with inheritance and cascading. But like any incredible tool, it requires a good user 's manual to learn how it works. The panel crams in a lot of information; here's a quick overview of what it provides:

A "summary" of style properties for the currently selected item in the "Summary for Selection"pane . Remember that whole thing about how parents pass on attributes to child tags, and how as styles cascade through a page, they accumulate (which means, for example, it's possible to have an <h1> tag formatted by multiple styles from multiple style sheets)? The Summary for Selection section is like the grand total at the bottom of a spreadsheet. It tells you, in essence, what the selected elementa paragraph, a picture, and so onlooks like when a Web browser tallies up all of the styles and displays the page.
The origin of a particular property is displayed in the "About" pane (Figure 6-12, top). If a headline is orange, but you never created an <h1> tag with an orange color, you can find out which style from which style sheet is passing its hideous orangeness to the heading.
A list of styles that apply to the current selection appears in the "Rules" pane (Figure 6-12, bottom). Since any element can be on the receiving end of countless CSS properties handed down by parent tags, it's helpful to see a list of all the styles contributing to the current appearance of the selected object on the page.
The order of the cascade in the "Rules" pane (Figure 6-12, bottom). Not only are styles that apply to the current selection listed, they're also listed in a particular order, with the most general style at the top and the most specific ones at the bottom. This means that when the same property exists in two (or more) styles, the style listed last (farthest down the list) wins.

Figure 6-12. The two viewsProperty Information (top) and Cascade (bottom)of the Styles panel are mostly the same. Both show a summary of properties that apply to the current selection; they also both display the Property list pane (see Section 6.4.2) used to edit those properties. The Property Information view, however, shows where a selected property "comes from"that is, which style and which style sheets were used in defining a property. In contrast, the Cascade view shows a list of all styles (rules) that the current selection inherits from.

A few examples can help demonstrate how to read the CSS Style panel when it's in Current Selection mode. Figure 6-12 shows the CSS properties affecting a selection of text (in this case, a paragraph) on a Web page. The Summary for Selection pane lets you know that if you viewed this page in a Web browser, this paragraph would be displayed in bold using the Georgia typeface, at a font size of 1.5 ems, and with 150% line height (space between each line of text). When you select a property from the Summary for Selection pane, and then click the Show Property Information button (Figure 6-12, top), the About pane displays where the property comes fromin this case, that property belongs to the p tag style, which is defined in the internal style sheet of the file index.html .

You've seen the bottom part of this pane before. It's the Properties pane, and it's used to delete, add, and edit the properties of a style (see Section 6.4.2). You simply click in the area to the right of the property's name to change its value, or click the Add Property link to select a new property for the style. Notice that in this example, the Properties pane contains fewer properties than the summary view. That's because it only displays properties of a single style (the <p> tag style), while the Summary view shows all properties inherited by the current selection.

Tip: Sometimes one or more of the three panes are too small for you to be able to see all the information displayed. You can use the gray bars containing the panes' names (circled in Figure 6-12, bottom) as handles and drag them up or down to reveal more or less of each pane.

Clicking the Show Cascade button (Figure 6-12, bottom) reveals a list of all styles that affect the current selection. In this case, you can see that two tag stylesone for the body tag and one for the p tagcontribute to styling the selected paragraph of text. In addition, as mentioned above, the order in which the styles are listed is important. The lower the name appears in the list, the more "specific" that style isin other words, when several styles contain the same property, the property belonging to the style lower on the list wins out. (See Section 6.5.2 for more on conflicts caused by cascading styles.)

The Properties pane provides even more information about conflicting properties. For example, Figure 6-13 shows that four styles are affecting the formatting of a single paragraph of text: three tag styles (<body>, <p>, and <p>) and one class style (.sidebar). Why two <p> tag styles? One is in an external style sheet, while the other belongs to the page's internal style sheet.

Clicking a style name in the Rules pane reveals that style's properties in the pane below. For example, in the bottom-left image in Figure 6-13, you can see that the sidebar class style has many properties, such as background color, text color, and so on. When a line appears through a property name (see the circled areas in Figure 6-13, bottom middle and bottom right), that property isn't applied to the current selection. Either it's overridden by a more specific style, or it's not an inherited property.

For example, the second-to-last style in the list in Figure 6-13 (bottom middle)a <p> tag styleshows that it has a setting for the "font-family" property. In addition, there's a line through the property name, indicating that it doesn't apply to the current selection. Because the more specific ".sidebar" class style also has the "font-family" property set (Figure 6-13, bottom left) in the battle of cascading style properties, ".sidebar" wins (see Section 6.5 for more on inheritance and cascading).

Figure 6-13. Selecting the"Current" view of the CSS Styles panel lets you easily view all the properties for your Web page's styles. A line (circled in two of the panels below) strikes out properties from a style that don't apply to the selected paragraph (top). In this example, the font-family in the second <p> style is overridden by the font family property in the more specific sidebar class style (bottom row, middle). Likewise, the sidebar class also overrides the font-size, color, and margin-left properties in the top <p> style (bottom row, right).

Tip: When you hover over a property name that's crossed out in the Properties pane, a pop-up window explains why the property doesn't apply. This is a big help when a certain property setting (such as a font color) from a style isn't being applied to your selection. The pop-up window explains which style it's in conflict with, providing you with the diagnostic information you need to go and fix the problem.

If your Web pages are elegantly simple and use only a couple of styles, you may not find much need for this aspect of the CSS Styles panel. But as you become more proficient (and adventurous) with CSS, you'll find that this panel is a great way to untangle masses of colliding and conflicting styles.