Use the CSS Styles Panel to Create and Edit Properties

Using the CSS Styles panel to create or edit properties is a flexible workflow, but one that may be comfortable only for developers accustomed to other CSS editors. Unfortunately for them, they will not be able to create new rules using only the new user interface. But let’s investigate what you can do.

1. In the Document window, click the pink sentence. It’s time to truly highlight it.
2. In the CSS Styles panel, click the color box for the color property in the Properties section. Select #003300 (a dark green).
3. Click the Add Property link in the Properties section.
4. Choose background-color from the pop-up menu that appears, then click the corresponding color box and choose #FFFF66 (a yellow).

That was fairly simple. Now you will create a rule and edit its properties.

1. In the CSS Styles panel, click the New CSS Rule button (the little plus icon in the bottom right corner of the panel).
2. In the New CSS Rules dialog box, choose the Class Selector Type option, and set the Define in choice to (New Style Sheet File). Type offset_text in the Name text box.
3. Click OK.
4. Since you chose to create a new style sheet, Dreamweaver first forces you to create the style sheet file. In the Save Style Sheet File As dialog box, make sure the folder for this site is where the file will be saved, then type test.css in the File Name text box. Click Save.

5. Define the following settings:

• (Type category) Color: #000000
• (Box category) Margin: Left: 10 pixels (uncheck the Same for all option)
6. Click OK.
7. In the document window, press Enter/Return to create a new paragraph on the page (this paragraph may be anywhere) and type new styles in separate CSS file.
8. Wherever you were when you clicked Enter/Return will dictate whether this paragraph already has a rule applied or is contained within a DIV tag. For your purposes, you are only concerned that this paragraph uses your new rule. With the cursor still in the sentence, click the <p> icon in the tag selector.
9. In the Property inspector, choose offset_text from the Style pop-up menu. Note that all class styles already defined are also listed in this pop-up menu.
10. In the CSS Styles panel, click the All button to see all rules available to the page. Note that this new rule is listed under test.css.
11. With the .offset_text rule selected in the All Rules section, click the Add Property link in the Properties section.
12. Choose the letter-spacing property from the pop-up menu. In the right column, type 15, and choose pixels.
13. In the Properties section, switch views by clicking the Show List View button.
14. Scroll down the list of available properties to get to border-bottom (phew… quite a long list, heh?).
15. This is what could trip up developers who are not accustomed to how CSS properties are written in code. I want to add a bottom border to this element, but there are so many choices. Note that if you select border-bottom, but hover over the right column, the user interface displays “style color width” in a tooltip. Take note! This is a subtle indicator of the definitions comprising this property.
16. The next three properties in the list give you that level of detail. Enter the following in each:
• border-bottom-color: #000000
• border-bottom-style: dotted
• border-bottom-width: 1 pixel

So far, you have been creating your styles in both the HTML document and in an external style sheet. In most cases, you want to keep all your styles in one place, and that one place is the external style sheet. In the next section, I will show you how to migrate the styles from the document into the external style sheet.