Five+1 Common CSS Hang-Ups In Dreamweaver [ continued ]

So, I’d suggest using the Properties inspector only to apply rules, not for creating. And whatever you do, don’t try to edit your rules on the Properties inspector, you’ll wind up in a mess. To find out how to apply styles from the Properties inspector, refer back to Hang-Up #3.

As for the CSS Styles panel, use this guy for three things: 1) Creating rules, by clicking the New CSS Rule button at the bottom of the panel, 2) Editing rules, by selecting them and using the bottom half of the panel, or by double-clicking on them, or 3) Deleting styles, by clicking on the Delete CSS Rule button in the panel’s bottom-right corner.

The CSS Styles panel can also be used to determine what rules are providing formatting instructions. This is useful whenever you have conflicting rules, or whenever two or more rules are controlling the same content. Which brings us to…

Hang-Up #5: Why Are My Rules Conflicting?

This one’s a toughy. Sometimes, you wind up with two or more rules controlling the same content, which can be really confusing and frustrating—especially when you’re trying to figure out what formatting is coming from which rule. In traditional desktop publishing, when styles conflict, one style always completely over-writes another (for example, when you import styles and there's a conflict). However, in CSS, styles don’t over-write each other. They blend together. Lemme explain.

Say for example, you have two rules, a redefined HTML <p> element, and a Class, called Quote. The <p>’s are obviously controlling all the paragraphs on your page, but lets say that within a paragraph, you’ve applied your Quote class to a sentence. This means that the sentence that has the Quote class applied to it is actually under the control of two rules, the redefined <p>, and the Quote. Follow? Okay, so which one takes priority?

Well, it all goes back to HTML fundamentals, which I discuss in my previously mentioned article on HTML basics. Remember HTML containers? For our purposes here, you could say that the sentence in our paragraph is within two containers, the <p> and the <span>. Remember, <span> is used whenever you click and drag to apply a Class, (as discussed back in Hang-Up #3), which is the case with our sentence here.

Now for this blending idea. Lets say that the redefined <p> has a font property that’s set to Verdana, and Quote is set to italic. That sentence that’s formatted as Quote, which sits inside a paragraph, would then wind up being Verdana and italic, while the rest of the paragraph would appear only in Verdana. Does that make sense? There’s two formatting instructions being sent to the sentence.

Now, if you set Quote to also change the font to Georgia, and the paragraph would still appear as Verdana, but the sentence would appear as (you guessed it) Georgia and italic. But why does Georgia take priority over Verdana? Because they conflict—this is the cascading effect of CSS.

How it works is the container that’s closer to the content (in this example, <span>) takes priority.

Now, if you’re totally confused, try this: Click inside the content that’s giving you a headache, and then at the top of the CSS Styles panel, click on the Current button. The panel will give you a list of all the properties that are set for your current selection. Hover over top of a property, and the panel will tell you what rule the property is coming from. This’ll help you troubleshoot and dissect your page formatting. Hope that helps. Okay, last one!

[ Back to Web + Mag Articles ] [ Go to page: 1 | 2 | 3 | 4 ]