1. I hope you know the advantages of using CSS instead of <font> tags for your texts andeven for your overall website designs. In this tutorial I will discuss how to create CSS tags in Dreamweaver and apply them to texts.

2. There are two types of CSS creation, one is to create inside the html page and apply to the same page and another to create it as a separate .css file. If you are working with a single page, then it is better to create CSS inside the page, but if you are working with many pages then it is better to create a separate file because that way you can apply this file to your other pages. That will save you time, you will not have to create it again and again for every page. Later it will save you time in updating your page in case if you want to change the size of your text, you just have to change in one file and all the pages will be updated automatically.

3. To apply CSS to your current working page, please go to Edit > Preferences > General and tick where it says Use CSS instead of HTML tags and click OK . See below.

Once you make these changes in preferences dreamweaver will apply CSS to your texts whenever you change font size, color, face...etc And it will create CSS codes accordingly under the name style1 , style2 ...etc You can change these names to meaningful words if you want.

4. To see how it works, open a new page and type some words in the page and change font size or color, and see how it has created a CSS style and applied it to your text. You can see it from properties box as shown below.

You can see your CSS styles in your CSS Styles Panel . Go to Window > CSS Styles if the panel is not already open. In CSS Styles Panel you can edit your styles, if you want to edit just right click on your CSS style and choose Edit... and you will be displayed with a pop-up window, where you can specify properties.

5. We have learned how to create a CSS style inside the page in the previous page, now we will learn how to create a separate CSS file. Open your CSS Styles Panel and click on the New CSS Style button.

6. You will be shown a new pop-up window like below. Choose a name for your CSS style. For the Selector Type: use Class (can apply to any tag) , and for Define in: use (New Style Sheet File) . Press OK .

7. Give your CSS file a name and Press Save . In step 6 you gave a name to your CSS Style , here you are giving a name to your CSS File . Please note that in one CSS File you can have many CSS Styles , so don't confuse these namings.

8. Once you press save you will be shown another pop-up window where you define your CSS properties. Please see below. Once you define the properties of your text, Press OK .

After you press OK your new CSS Style will appear in the CSS Styles Panel .

9. To apply your new CSS Style to any text, just highlight the text and choose your style from Properties Panel .

That is all to "Creating CSS Styles" in Dreamweaver MX 2004. I hope you enjoyed the Tutorial.