The Relevant CSS Panel | SYS-CON AUSTRALIA

The Relevant CSS Panel

Fixing some of your CSS problems

Oct. 18, 2004 12:00 AM

Cascading Style Sheets (CSS) can be confusing. Not only do Web developers need to know the different CSS properties, and the sometimes bizarre ways that Web browsers render those properties, there are times when CSS just doesn't seem to behave. You create a new class style - .highlight, for example - that's supposed to change the text color to burgundy. But when you select the text and apply the style nothing happens.

As you build more complex sites, with hundreds of styles, this kind of problem seems to happen more frequently. In most cases, the CSS is behaving just as it's supposed to - the problem is that any given style sheet will often have styles that conflict in one or more ways. Ferreting out these conflicts can be a chore; fortunately, Dreamweaver MX 2004 introduced a new tool -- the Relevant CSS panel - to help solve these dilemmas.

When Styles Collide: Understanding CSS Conflicts
One of the fundamental features of CSS is the way styles can pass from one element to another. This basic principle, known as inheritance, is a powerful way to simplify formatting tasks. For example, in the bad old days, when we used the <font> tag to format text, we had to wrap every piece of text with the <font> tag. Even if you just wanted to use Arial for all of the text on your page - headings, paragraphs, lists - you'd have to use multiple <font> tags. This significantly increased the file size of a Web page and was a lot of work (well not quite so much with Dreamweaver).

CSS and inheritance makes this same task a snap. With CSS, child elements inherit properties of their parent elements; so, to apply a single font family to a page, you merely assign a font family to the <body> tag. Other elements on the page, such as headings and paragraphs, inherit this property, so they too use the same font.

Because of inheritance, we can set some global properties for our page by merely styling the <body> tag. Those properties are then inherited by child elements (well, not all properties are inherited, as you'll see below). Fortunately, you can override inheritance by creating styles that apply in specific instances. For example, say in general you want text on the page to be bright blue and use the Arial font. But in some cases, you'll want to override this - for example, all headlines should be fire engine red, and all bulleted lists should be in Times New Roman. Create a style for the <body> tag, and other styles for the <h1> and <ul> tags.

Not only is inheritance at work, but also another feature of CSS - the cascade. The cascade governs how interacting styles work. So in the example above, the <h1> tag would inherit the font face from the <body> tag, but would overrule the <body> tag's font color. It's CSS ability to mix styles and properties that gives pages a great deal of formatting finesse, with very little code. But, the cascade is also the source of many conflicts that often seem bewildering.

Here's a simple example that demonstrates the kind of problems that frequently pop up. Say you created a <div> with an ID style of #content - perhaps this <div> is used to lay out the main story on a page. You want all the paragraphs inside that div to be both bold and red, so you create a style #content p - this is a descendent selector that merely says any <p> tag inside an element with the ID of content should be bold and red (see Figure 1). Because you want a single paragraph in that div to be blue and not bolded, you create a class style called .special. But when you apply it to a paragraph in the div nothing happens. What gives?

Resolving the Cascade: Understanding Specificity
When a single element is affected by multiple CSS styles, CSS provides rules for dealing with these conflicts. Each CSS style has what's known as ?specificity? - a style with a higher specificity overrules a style with lower specificity. As you know, there are different types of styles - tag styles, class styles, and ID styles. When you define a style for a particular HTML tag, like the <body> tag, that's a tag style. Class styles, which are preceded by a period - .pullQuote, for example - are applied manually, for example using the Property Inspector or the Text menu's CSS styles submenu. IDs are similar to class styles; but whereas a page can have multiple elements each with the same class applied to it, an ID style should only be applied once per page. IDs are preceded by the # symbol - #banner, for example - and are frequently used to indicate logical divisions in a page, such as a banner, sidebar, or footer.

The type of style you use greatly affects that style's specificity. Here's a simple method for determining a style's specificity. If it's a tag style, the style has a specificity of 1; a class style gets a specificity of 10; and an ID style has a specificity of 100. Say you created a Web page with three styles: a tag style that defines the text color for the <p> tag as green; a class style, named .blue, with a text color of blue; and #red, an ID style with a red text color. All paragraphs on the page will be green. But if you applied the .blue style to one of those paragraphs, its text would be blue - since a class style has greater specificity (10) than a tag style (1). If you then applied the ID #red to that same paragraph (probably not something you'd normally do), that text will be red - since ID styles trump class styles (100 v. 10).

In this case, the style name - called a ?selector? in CSS speak - is actually composed of a tag name and an ID. So say you create an ID style of #red, another style with the selector of p#red, and then create a paragraph with an ID of red (<p id=?red?). There are two styles in your style sheet, #red and p#red. What happens if a rule in one style conflicts with a rule in the other? In this case p#red wins, because it has both an element (p with a specificity of 1) and an ID (#red with a specificity of 100) - in other words, 101 vs. 100.

This really comes into play when you begin to use descendent selectors (see Vol. 2, Issue 4). A descendent selector can narrow how a style is applied by defining the context of an element. For example, in Figure 1 the #content p style is a descendent selector identifying only <p> tags that also appear inside an element with the ID of content. In this example, that style has a specificity of 101 (an ID plus an element). Now it's easy to see why, in the earlier example, applying the class style of .special to one of the paragraphs inside the #content div has no effect. Because the selector p.special is composed of one element (p) and one class (.special), the specificity is just 11. Since 101 is more than 11, the #content p style wins. To fix this situation, you could just rewrite the p.special as #content p.special - now that style has a specificity of 111.

Thankfully, Dreamweaver has a useful diagnostic tool to help solve confusing CSS conflicts like this.

The Relevant CSS Styles Panel: A Great Friend
The Relevant CSS Styles panel (see Figure 2) displays all styles that apply to a particular selection (and lets you edit those styles using the property list in the bottom half of the panel). In other words, the list of relevant styles indicates all styles from which the current selection might inherit formatting rules. For a complex design with lots of styles this list can become quite long. Fortunately, Dreamweaver makes it easy to determine when there's a conflict and which rule has the greatest specificity.

The order in which the styles appear in the Relevant CSS panel indicates the effect of styles on the current selection - the last style listed has greatest specificity. For example, in Figure 2 the style #dateline p#source has the greatest specificity, so its properties will overrule any conflicts in any of the other styles that appear in the list.

Dreamweaver also makes clear when there's a conflict between styles and why. If you select a style in the Relevant CSS styles panel and see a red line through a CSS property name, that property is not inherited by the current selection. This happens for two reasons. The first is that the property is overruled by a style with the same property but greater specificity. For example, in Figure 3 a red line through the font-size property indicates that the current selection isn't inheriting font size from this style. Dreamweaver helps us out even more by letting us know why the conflict exists: hovering your mouse over the red line produces a tool-tip box with an explanation. In this example, Dreamweaver indicates that the style div#dateline p overrides the font-size property of #story p.

You'll also encounter that red line even if there isn't a style sheet conflict. Some CSS properties aren't inherited at all. In these cases, you'll see a red line through those properties even if another style doesn't contradict them (see Figure 4). Margin, padding, background, height, width, and positioning properties aren't inherited. And this is a good thing; after all, if the height property was inherited you'd have quite a mess. For example, say you created a style that set a div to 200 pixels high. If every element inside that div inherited the div's height, you'd end up with 200-pixel tall paragraphs, 200-pixel tall graphics, 200-pixel tall headlines, and so on.

You can also use the Relevant CSS Panel to figure out other styling problems. For example, say you add a paragraph to your page and see that the text is all blue. You're not sure why it's happening, since you didn't create a paragraph style with the color blue. By selecting each of the styles in the list - i.e., each style that might be passing on its properties to the selection - you can locate which style is dictating the color and then edit that rule or create a new style, with greater specificity, to overrule the blue color.

Other Ways to Win the Style Wars
There are some other ways to enforce a style even if there is a conflict. For example, say you wanted to be able to create a class - let's say .special - that will make all text it's applied to blue. As we saw above, just applying that class to an element won't ensure you'll get blue text - another style like #content p might overrule it. And while creating a style with more specificity like #content p.special will work, it won't work for <p> tags with that class that aren't inside the #content div. Nor will it work for other tags, like headings or bulleted lists.

A quick solution is to invoke the CSS !important declaration. You can add !important after any rule in a style to give it precedence over any other rules. Unfortunately, Dreamweaver doesn't have a menu-driven way to do this; you just have to open the style sheet in code view and add it by hand (tip: the quick way to open a style sheet to a style is to double-click the style name in the Relevant CSS Styles panel or the regular old CSS Styles panel). For this example, you could edit the .special class style like this:


.special {
	color: #0000CC !important;
}

Now you could apply this class to any element, and even when other styles with greater specificity conflict this style will win out. The Relevant CSS style panel also recognizes the !important declaration. For example, in Figure 5, even though the list of styles in the panel indicate that #content p has greater specificity than .special, the red line through the color property indicates that the !important declaration wins out.

Summary
Inheritance, cascade, and specificity are all things that make CSS an incredibly powerful tool - simplifying style sheets by reducing the number of rules needed to format your page. But as CSS becomes even more important in how we format our pages - it's not uncommon to find sites utilizing multiple style sheets with many rules - the number of confusing interactions between styles is bound to increase. Fortunately, the Relevant CSS panel can help.

. . .

For more information on inheritance, the cascade, and specificity visit, www.w3.org/TR/REC-CSS2/cascade.html

Extension of the Month

Cartweaver 2.0

Extension Developer: Application Dynamics, Inc.
Developer Web Site: www.cartweaver.com
Price: $225.00

Building a shopping cart system from scratch can take a seasoned programmer months of hard work. But if you use Dreamweaver to develop ColdFusion sites, you can have a full-featured e-commerce solution up and running for less than you'd pay a programmer for a few hours of his time. Cartweaver 2.0 is a complete e-commerce solution for ColdFusion, providing catalog, shopping cart, checkout, and administrative functionality.

In less than an hour you can integrate e-commerce features into your current site, or generate a complete store from scratch. Cartweaver provides a lot of flexibility in how you display your products, including support for multiple product options like color, size, or any option that fits your products. You can even include links to related products on a product page, a great way to push traffic through your site and entice shoppers with other products. You control the action - updating products, overseeing orders, and managing customer information - through Web-based administrative tools. You can also track inventory and allow back-ordering of out-of-stock products. To complete the sale, Cartweaver provides support for several popular payment gateways and processors: Authorize.Net, PayFlow Pro, WorldPay Select Junior and PayPal.

Developers will be pleased to note that the licensing fee is per developer, not per site. So once you own Cartweaver you can deploy as many e-commerce sites as you like. Even better, Cartweaver's ColdFusion code is completely open and very well commented - so developers who want to expand or change the functionality of their e-commerce site can freely dive into the code and program away.

If your ColdFusion site is aching for e-commerce functionality, Cartweaver 2.0 might just be the answer.

. . .

Have a favorite extension? Is there an extension you just couldn't live without? We're always on the lookout for awesome extensions, so drop us a line at:
DaveMcFarland@sys-con.com

Related Links

About Dave McFarland
Dave McFarland is the Dreamweaver editor of MX Developer's Journal and author of Dreamweaver MX: The Missing Manual. Find out about his latest projects at www.sawmac.com.

DAVEMCFARLAND@SYS-CON.COM