Adobe Dreamweaver CS3
Formatting with CSS Styles
After you have created an embedded or external style sheet, you can apply the created style to text, objects, or elements as you create your web page. You may also find that you want to edit a created style, or even delete the created style altogether.
For more information on the advantages of CSS and types of CSS style sheets, see Overview of Cascading Style Sheets. For information on creating embedded styles and external style sheets, see Creating Style Sheets. For information on accessing and using the CSS Styles tab, see Using the CSS Styles Tab.
Applying Styles
In order to view the formatting created by a cascading style sheet, the styles need to be applied to the desired text or tag(s).
HTML Tags and CSS Selectors
When you redefine an existing HTML tag or CSS selector, the style definition is automatically applied to the HTML code.
Custom Styles
Since custom styles are not attached to a specific HTML tag when they are created, you need to apply them to individual page elements. You can customize the appearance of elements on a web page using both Class (custom) styles and Tag styles.
Applying Custom Styles to a Selected Element: CSS Pane
-
Select the text or element you wish to apply the Class style to
OR
Place the insertion point on the same line with the text or element you wish to apply the Class style to -
From the CSS Styles pane, click ALL
-
In the All Rules scroll box, right-click the desired Class style » select Apply
NOTES:
All Class styles are designated with a period (.) preceding the name (e.g., .greentext, .allcaps).
The style is applied.
Applying Custom Styles to a Selected Element: Design View
-
From the Design view, select the text or element
-
Right click your selection » select CSS Styles » the Class style to apply
Applying Custom Styles to a Selected Element: Properties Pane
-
In the Design view, select the object or text that you want to apply the Class style to
-
In the Properties pane, from the Style pull-down list, select the appropriate Class style
Editing Styles
As you are designing your web pages, you may decide that you would like to change a style that you have already defined. For information on using the Editing Styles view, see Edit Styles.
-
From the CSS Styles pane, click ALL
-
In the All Rules scroll box, select the style you want to edit
-
Right click your selection » select Edit...
OR
From the CSS pane toolbar, click EDIT STYLE
The CSS Rule definition dialog box appears.
-
For the appropriate categories, make the desired changes
-
To test the results, click APPLY
To cancel the changes, click CANCEL
To accept the changes, click OK
Deleting Styles
As your web page develops, you might decide that you would like to delete a style or style sheet.
-
From the CSS Styles pane, click ALL
-
In the All Rules scroll box, select the style you want to delete
-
Right click your selection » select Delete
OR
From the CSS Styles toolbar, click DELETE CSS RULE
The style sheet entry is removed from the CSS Styles pane, and the style definition is removed from all applicable tags on your web pages.
