Dreamweaver CS4 Public Beta: What's New? - Part 1

By: Sheri German

Page 2 of 3

Previous Next

The CSS Tab

The CSS portion of the Properties inspector is a dream come true. Here is a list of just some of the new functionality it provides:

Better control in creating and naming styles
No longer adds styles to the head of documents with style1, style2, etc. (oh, joy, oh rapture unforeseen!)
Allows you to edit existing styles by using visual tools in the Properties Inspector
Let's you open the CSS source with the click of a button
Takes you right to the code for the target rule

Let's walk through an example task in the music layout pictured at the beginning of this article.

Place the cursor in the heading "Music through the ages".
Click the CSS button in the Properties Window. Dreamweaver intelligently looks at your selection and lists an existing rule that might apply to it. Adobe refers to this as a "best fit selector". In this case, the descendant selector #content h1 appears to be the best fit for the selected text.
Click the center align button. Dreamweaver center aligns the H1 text without adding deprecated code! Look at the properties for the rule to see how the centering is added.
Use the Color Swatch to select a new color for the text. Of course, you can also click the Edit Rule button to open the rule in the CSS Styles Panel.

Image 3: Dreamweaver intelligently detects that the cursor is within the #content h1 rule
Click the center align button again, and the text moves to the left. Dreamweaver removes the property and value pair from the #content h1 rule.
Now select some text on the page within the content region.
Make sure that the CSS button in the Properties Inspector to still in the forefront. Again, Dreamweaver intelligently looks at your selection and lists an existing rule that might apply to it. If it finds none, it displays <New CSS Rule> in the Targeted Rule drop down menu. (Tip: The Targeted Rule drop down menu also lists an option to add New Inline Style and New CSS Rule.)

Image 4: Make a selection in the document to add HTML or CSS formatting from the Properties Window
Click the Edit Rule button.
The New CSS Rule dialog box displays. Hey! Look at this new dialog box! Again, Dreamweaver intelligently senses what you want to create. Here's the cool part - remember how Dreamweaver, based on where your cursor was positioned on the page, displayed complex selectors whether you needed them or not? For example, for the new rule we want to create for paragraphs within the content div of the music page, Dreamweaver includes the parent div container in the selector name. Because in this case we don't really need all of that, we can click the Less Specific Button to get rid of it.

Image 5: Click the Less Specific button to delete the #container ID name from the rule

Image 6: Now that the #container div is gone, a More Specific button becomes activated