Inserting and Formatting Text > Using CSS style sheets > Creating a CSS style in Dreamweaver
Inserting and Formatting Text > Using CSS style sheets > Creating a CSS style in Dreamweaver |
|
Creating a CSS style in Dreamweaver
Create a CSS style to automate the formatting of HTML tags or a range of text identified by a class attribute.
To create a CSS style:
| 1 | Choose Window > CSS Styles and in the CSS Styles panel, right-click (Windows) or Control-click (Macintosh) and choose New Style from the pop-up menu. You can also click the New Style icon found at the bottom of the CSS Styles panel. |
| 2 | Choose from the following CSS style options: |
Make Custom Style (Class) creates a style that can be applied as a class attribute to a range or block of text. |
|
| Redefine HTML Tag redefines the default formatting of a specified HTML tag. Keep in mind that you can alter the layout of many pages when you redefine a tag. | |
Use CSS Selector defines the formatting for a particular combination of tags or for all tags that contain a specific 1d attribute. |
|
| 3 | Enter a name, tag, or selector for the new style: |
 |
Custom style (class) names must begin with a period. If you don't enter the period yourself, Dreamweaver enters it for you. These names can contain any combination of letters and numbers, but a letter must follow the period. For example, .myhead1. |
|
To redefine an HTML tag style, enter an HTML tag or choose one from the pop-up menu. |
|
For a CSS selector, enter any valid criteria for a selector (for example, td, or #myStyle), or choose a selector from the pop-up menu. The selectors available from the menu are a:active, a:hover, a:link, and a:visited. |
| 4 | Select the location in which the style will be defined: New Style Sheet File (external) or This Document Only. |
| 5 | Click OK. The Style Definition dialog box appears. |
| 6 | Choose the formatting settings for the new CSS style. Leave attributes empty if they are not important to the style. |
| Attributes that do not appear in the Document window are marked with an asterisk (*) in the Style Definition dialog box. Some of the CSS style attributes that you can set with Dreamweaver appear differently in Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0, and some are not currently supported by any browser. | |
| 7 | Click OK or Apply. |
 |
See the following topics for information on specific settings:
When you create a custom (class) style, it appears in the CSS Styles panel and in the Text > CSS Styles submenu. HTML tag styles and CSS selector styles do not appear in the CSS Styles panel because they cannot be applied; they are reflected in the Document window automatically wherever the tag or selector occurs.
|