Hey, what’s up? You know, I’ve been teaching, writing about, and using Dreamweaver for quite a long time, and on the issue of CSS and Dreamweaver, there seems to be some common misunderstandings, some common hang-ups that seem to really mess people up. So the other day I was explaining a few of these very issues with a few students, and that put my brain ta thinkin’. “Ya know, I’ll betcha a lot of people could benefit from an article on exactly this subject.” So for once, I listened to my better judgment and decided to get to work putting it all down. So without further delay, here are five common hang-ups with CSS and Dreamweaver, plus a bonus one thrown in for good measure. Enjoy!

Hang-Up #1: What’s Up With The Format And Style Menus On The Properties Inspector?

Good question—and when should you use each? Truth is, they do completely different things; lemme explain. Both seem to format text, but there’s a lot more going on in the background.

Pop open the Format menu, and you’ll see None, Paragraph, Heading1, Heading2, and on and on, all the way down to Preformatted. These are HTML block elements. You could say that these are old school format settings for heading levels and paragraphs, and they’re built into HTML. You can’t change them unless you involve some CSS. Now, if you wanted a block of content to be formatted as a heading or paragraph, just click inside the block, and then make your choice from the menu. You’re just setting the container for your content, right? Hence the term block element. If this container stuff isn’t makin’ any sense, be sure to check out my article on HTML funamentals (it focuses on concepts, not code).

Now, as for the Style menu, this guy’ll list any Class rules that you’ve created. In other words stuff that appears in this list is stuff that you have created—they aren’t built into HTML, like the items in the Format menu. So, maybe you’ve created rules to control photo captions, price lists, product names, and so on. They’d all be listed here. To use ‘em, all you do is either single-click inside a paragraph or heading, or select a word or sentence; then choose your rule from the Style menu.

Is this making sense? So items that appear under the Format menu are built into HTML, and stuff that appears in the Style menu is user-created. Okay, let’s check out Hang-Up #2.

Hang-Up #2: What’s Margin and Padding And What’s The Diff?

When creating and editing CSS rules, often times 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 the 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 (it's on the next page), 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 orange background color and the text on the first screen shot? That’s padding. That’s what I meant when I said that padding adjusts the spacing on the inside of the rule.

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