Thomas Wallace: Lectures and Resources - A collection of website design lectures and resources

Using Dreamweaver CS4 to Create and Apply Styles

1. Open Dreamweaver and make sure you are working inside your defined site.
2. Using the files panel, open your index.html file

Important: Always make sure to check the styles panel to make sure there is not an existing rule for the element you wish to style. Failure to do so will cause you to create duplicate rules that conflict with one another.

Redefining an HTML tag

1. Highlight the element you wish to style (note: this element should be properly marked-up)
2. In the Properties Inspector select the CSS tab.
   
3. Make sure that the tag you wish to style is selected in the tag inspector
   
4. Click the Edit Rule button
5. From the New CSS Rule Dialog
   • Choose Tag from the contextual selector drop down
   • Verify that the tag you are redefining is listed
   • In the Rule Definition Section make sure that you define the rule in screen.css (or whatever stylesheet you wish add a new rule)
   • Press OK when you are ready to style the object

6. You should now see the Rule Definition Dialog

7. Style the element accordingly and press OK
8. You should see the new rule you created in the CSS Styles Panel.
   
9. To edit this rule at any time simply double-click the item in the list
   

Creating a CSS Rule for an Element with an ID

1. In your index.html document create a new <div> and give it an ID name of test. It should look like this in the code:

<div id="test">This is a test</div> 

2. Insert your cursor in the newly created <div>
3. In the Properties Inspector select the CSS tab.
   
4. Click the Edit Rule button
5. From the New CSS Rule Dialog
   • Leave Compound selected in the contextual selector drop down
   • Verify that the tag you are redefining is listed
   • In the Rule Definition Section make sure that you define the rule in screen.css (or whatever stylesheet you wish add a new rule)
   • Press OK when you are ready to style the object

6. Notice you can adjust the specificity of the rule by pressing the Less Specific Button. Remeber...The less specific the rule the more global effects it will have. For more information on CSS Specificity see this article

7. You should now see the Rule Definition Dialog

8. Style the element accordingly and press OK
9. You should see the new rule you created in the CSS Styles Panel.
   
10. To edit this rule at any time simply double-click the item in the list

Creating a Class

1. Highlight the object you wish to Class
2. In the Properties Inspector select the CSS tab.
   
3. Click the Edit Rule button
4. From the New CSS Rule Dialog
   • Select Class in the contextual selector drop down
   • Type the name of the name of the Class you wish to create. Class names start with a period and contain no special characters or spaces (.myClass)
   • In the Rule Definition Section make sure that you define the rule in screen.css (or whatever stylesheet you wish add a new rule)
   • Press OK when you are ready to style the object

5. You should now see the Rule Definition Dialog

6. Style the element accordingly and press OK
7. You should see the new rule you created in the CSS Styles Panel.
   
8. To edit this rule at any time simply double-click the item in the list
9. To apply the class, highlight the text you would like to apply the class to and select the class from the Targeted Rule dropdown menu.