Create a CSS Style Sheet


Tutorial Home >Software >Graphics >Macromedia Dreamweaver 3.0 >Using Style Sheets >Create a CSS Style Sheet
Tutorial Home >Software >Internet >Macromedia Dreamweaver 3.0 >Using Style Sheets >Create a CSS Style Sheet

  Step 1:  Open the CSS Styles Window

Open a Report
To make additions and changes to your Cascading Style Sheets associated with your HTML document, you have to open the CSS Styles window by selecting the Window, CSS Styles (F7) menu option.
  Step 2:  The New Style Button

Open a Report
The first thing you need to do is to select the object to which you are adding the style sheet settings from the Apply To drop down list. To create a new style for the selected object, you need to click the New Style button, shown circled here. This button opens the New Style dialog from which you can control the objects to which your style sheet will be applied.
  Step 3:  The New Style Dialog

Open a Report
In the New Style dialog, select Make Custom Style for use with specific instances of an element. If you were defining style for a copyright paragraph, select Make Custom Style. In the Name field, provide the name of the paragraph (.copyright). The Redefine HTML Tag applies style settings to instances of the element you selected in the CSS Style window. The Use CSS Selector option to select from the a:active, a:hover, a:link, or a:visited options to control the look of your links. Click OK when you're done.
  Step 4:  Style Definition Dialog

Open a Report
The style definition dialog has close to a hundred different options on it that can all be set. Some of these settings will not have any effect on some objects. Select the Category of style sheet setting you wish to modify from the Category list, and then make the changes to the individual style sheet settings available in the Type settings list. Click OK when you have completed your settings.
  Step 5:  View Style Sheets

Open a Report
When you close the Style Definition dialog, you will be returned to the CSS Style window. From this window, you can view all of the available style sheets by clicking the View Style Sets button that is circled. This opens the Edit Style Sheet dialog discussed in the next step.
  Step 6:  Edit Style Sheets

Open a Report
The dialog lists all of the style sheets that you have previously created. To edit your style sheet, select the style sheet from the list, and then click the Edit button. This will open the Style Sheet Definition dialog where you can make a as many other changes to your style sheet as you wish. When you are done making changes, click the OK button on the Style Sheet Definition dialog, and then click Done on the Edit Style Sheet dialog.
  Step 7:  Your Document Code

Open a Report
For every style sheet entry you create, additional style rules will be added to your HTML document. These rules are formatted as shown within the HTML code. Each of these rules controls one portion of the appearance of the HTML code and can be adjusted either using the Edit CSS Style dialog, or in the HTML code directly.