An Overview of CSS in Dreamweaver 8 – Use the CSS Styles Panel to Create and Edit Properties
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.
- In the Document window, click the pink sentence. It’s time to truly highlight it.
- In the CSS Styles panel, click the color box for the color property in the Properties section. Select #003300 (a dark green).
- Click the Add Property link in the Properties section.
- 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.
- In the CSS Styles panel, click the New CSS Rule button (the little plus icon in the bottom right corner of the panel).
- 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.
- Click OK.
- 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.
Define the following settings:
- (Type category) Color: #000000
- (Box category) Margin: Left: 10 pixels (uncheck the Same for all option)
<p>icon in the tag selector.
.offset_textrule selected in the All Rules section, click the Add Property link in the Properties section.
- 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.