Five+1 Common CSS Hang-ups In Dreamweaver

Hey, what’s up? Sensei Zap here (cheers for the moniker, 3dogmama!) Okay now, on the issue of CSS and Dreamweaver, there seems to be some common hang-ups that really mess people up. So I and decided to get to work and explain some of these issues. So, here’s my list of five hang-ups with CSS and Dreamweaver, plus a bonus one thrown in for good measure. Enjoy!

[i][b]Hang-Up #1: What’s Up With The Format And Style Menus On The Properties Inspector?[/b][/i]

So what’s the diff between these two menus, and when should you use ‘em? Truth is, they do completely different things; lemme explain.

Pop open the Format menu on the Properties inspector, and you’ll see None, Paragraph, Heading1, etc. These are HTML block elements—they’re built into HTML. Now, as for the Style menu just to the right, this guy’ll list out any class rules that you’ve created via CSS. In other words, stuff that appears in this list is stuff you’ve created—they aren’t built into HTML.

Is this making sense? So items that appear under the Format menu are built into HTML, whereas formats that appear in the Style menu are rules that you’ve created. Okay, keep on reading to check out Hang-Up #2.

[i][b]Hang-Up #2: What’s Margin and Padding And What’s The Diff?[/b][/i]

Lots of people get really confused between the margin and padding settings found in the CSS Rule Definition dialog’s Box category. So you know what I’m talking about here, you’ll have to double-click on one of your CSS rules over in Dreamweaver’s CSS Styles panel, and then in the dialog box that appears, head for the Box category. There, you’ll see Padding on the left, and Margin on the right. Okay, so what do they do?

In short, padding adjusts the spacing on the inside of the rule, while margin adjusts the spacing on the outside of the rule. Confused? Have a look at the screenshot below, that should help. What really makes the difference between the two becomes obvious as soon as you set a background color for your rule. See how there’s a gap of space between the edge of the background color and the text? That’s padding. Margin, on the other hand, pushes content way from the rule, much like Space Before and Space After does in a page layout program—except with CSS, you can apply the spacing on all four sides. Again, have a look at the screen shot.

[i][b]Hang-Up #3: Why Won’t My Class Rules Apply Properly?[/b][/i]

When you go to apply a class rule that you’ve created, should you make a selection, or just single-click with your insertion point? Well, that all depends on what you’re trying to do. See, class rules will behave differently depending on the type of selection you make before you apply them. I won't get into the nitty-gritty, but here's the gist:

If you make a selection before applying a class, the rule is applied only to the content you’ve selected, like a word or sentence, for example. Alternatively, if you single-click inside an object, like a paragraph, table cell, or heading, Dreamweaver applies the rule to the entire object—the whole sha-bang.

So before you start applying rules, the big question is, whadda ya wanna format? Just a word or two, or an entire block? Knowing how all this works means you’ll be able to make the right selection that’s needed to pull off what you’re trying to do.

[i][b]Hang-Up #4: When Should I Use The Properties Inspector vs The CSS Styles Panel?[/b][/i]

As soon as you begin setting fonts, colors, and so on with the Properties inspector, Dreamweaver creates a new class rule for you, usually called Style1 (or something like that). However, don’t bother creating rules with the Property inspector. Why? Cuz you’re only given a few options, like font, size, color, bold, and italics, and you wind up with a style list that reads Style1, Style2, Style3…Style25, Style26…That’s no good.

So, I’d suggest using the Properties inspector only to apply rules, not for creating, which we talked about back in Hang-Up #3. And whatever you do, don’t try to edit your rules on the Properties inspector, you’ll wind up in a real mess.

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…

[i][b]Hang-Up #5: Why Are My Rules Conflicting?[/b][/i]

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.

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 rule takes priority? Neither—they actually blend together. Lemme explain.

Lets say that the redefined p rule 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?
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 instruction that’s closer to the content (in this example, Quote) 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 Current. 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!

A bonus hang-up kinda seems like, [i]“hey by the way, here’s something else to really screw you up!”[/i] I don’t really mean it like that, honest! But there’s one other aspect of CSS and Dreamweaver that seems to confuse the heck out of people, and that’s the difference between the different types of CSS rule types available in Dreamweaver—specifically class rules and redefined HTML tags.

You can actually do some pretty awesome things with these two fellas, but they both do completely different things, and work in very unique ways. Trying to explain exactly how these two fellas work is a bit more involved, so I’ve created two video tutorials for you on exactly this subject, [url=http://www.tentonbooks.com/videos/Dreamweaver-Class-Versus-Redefined-pt1.html] Dreamweaver Special: Class Rules Versus Redefined Tags, Part1[/url], and [url=http://www.tentonbooks.com/videos/Dreamweaver-Class-Versus-Redefined-pt2.html] Dreamweaver Special: Class Rules Versus Redefined Tags, Part 2[/url]. Check ‘em out, and all should make sense.

[i][b]Hang-Up Round Up[/b][/i]

So there it is. I hope I’ve been able to demystify and remove some confusion from these common tricky spots in Dreamweaver. If you’re still having trouble, I’d suggest getting a solid understanding of HTML and CSS fundamentals. I’d also suggest lots of fiddling and experimenting in Dreamweaver so you really have this down. I invite you to post any questions in the comments, too. Until then, keep at it, and have lots 'n lots of fun!