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

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. The second screen shot gives an example of Margin. Makin’ sense?

I think of Padding as cell padding when I’m inserting tables—it’s the space on the inside, if that helps; but definitley try it out on your own. Ready for #3? Let’s check it out.

Hang-Up #3: Why Won’t My Class Rules Apply Properly?

When you go to apply a Class 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.

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 HTML container, like a paragraph, table cell, or heading, Dreamweaver applies the rule to the entire container—the whole sha-bang gets formatted.

All this selection and formatting stuff reminds me of character styles and paragraph styles from the print world. In fact, if you have the stomach for it, have a look at your background code, and compare what happens when you make a selection and apply a Class rule, versus when you single-click and apply your rule.

If you're lookin' at your code, you can see that when you make a selection, Dreamweaver inserts code that reads <span class=, and then in quotes, the name of your class rule. Further down, where the formatting ends, you’ll see </span>. So when you make a selection, the <span> element is being used.

Now when you take a look at the code when you’d single-clicked, you’ll see that the rule is attached to the HTML element (container) itself. For example, you might see <p class=, and then the name of your class rule, if you’d formatted a paragraph. Or maybe you see <td class= in the case of a table cell. The formatting then ends where the container ends; with </p> for a paragraph, or </td> for a table cell. Is that workin’ for ya?

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.

Hang-Up #4: When Should I Use The Properties Inspector Versus The CSS Styles Panel?

Here’s another CSS hang-up in Dreamweaver: When to use the Properties inspector at the bottom of the screen, and when to use the CSS Styles panel over on the right. So here’s the low-down.

In regards to formatting text with CSS, 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), which can be seen in the Styles menu on the inspector, or in the CSS Styles panel. So, in other words, you can create CSS rules from the Properties inspector. However, don’t do it. Why? Cuz you’re only given a few options, like font, size, color, bold, and italics, and you have to rename each of your rules one at a time, unless you’d like a style list that reads Style1, Style2, Style3…Style25, Style26…catch my drift?

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