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

Using Dreamweaver 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

Redefining an HTML tag

1. Select the New CSS rule button from the bottom right hand corner of the CSS panel.
   
2. From the pop-up menu select Tag as the Selector Type, select the tag you wish to style from the Tag drop down menu, and set the Define in to screen.css
   
3. Style the element by selecting the category of style you would like to apply and then the specific options.

4. Hit OK. You should now see the new style you created in the CSS styles box.
   

Creating a 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. Select the New CSS rule button from the bottom right hand corner of the CSS panel.
   

3. From the pop-up menu select Advanced as the Selector Type, In the Selector input type #test, and set the Define in to screen.css
   
4. Style the element by selecting the category of style you would like to apply and then the specific options.

Creating a Class

1. Select the New CSS rule button from the bottom right hand corner of the CSS panel.
   
2. From the pop-up menu select Class as the Selector Type, In the Selector input type .redbox, and set the Define in to screen.css
   
3. Style the element by selecting the category of style you would like to apply and then the specific options.
4. You can now use this class on any page that has the screen.css style sheet attached.
5. To apply the class, highlight the text you would like to apply the class to and select the class from the Style drop down menu.