Pin Me

Creating a New CSS Text Style in Dreamweaver

written by: Amanda Presley•edited by: Michele McDonough•updated: 11/2/2010

If you are just starting out with CSS and would like to create your own CSS text styles in Dreamweaver, read this guide. This guide will show you how to create CSS text styles for your website in Dreamweaver.

  • slide 1 of 1

    CSS Styles are very popular among web designers. Knowing CSS will help you go a long way in web design. It makes applying styles a lot easier. This tutorial is going to show you how to create a new CSS Text Style in Dreamweaver. I will walk you step by step through creating this CSS style. Go ahead and open your Dreamweaver program and create a new HTML document to use for this tutorial. You will need to save this document in order to create the style, so save the document as test.html.

    Creating a New CSS Text Style in Dreamweaver

    Type some text on your document. Highlight the text and right click on it. A menu will drop down. In the menu, locate the CSS Styles link. Place your mouse over the link and another menu will open. Click the New link in the menu. Now you will be seeing the box below.

    How To Create a New CSS Text Style in Dreamweaver - New Style 

    In the New Style Box, you will need to tick the Class field. Then you will need to enter a name for the new style. I used text1 for the name of my new style. You can name it what you want. Once you start creating different CSS Styles you will need to give the styles unique names, but since this is practice, give it any name. Then tick the This Document Only field at the bottom of the box. Once you have all of that, click the OK button.

    How To Create a New CSS Text Style in Dreamweaver - New Style box 

    Creating the Rules for the New Style

    Now we will go over setting the rules for the new CSS Text Style that we are creating. You should be seeing the Rules box now. On the left side of the box, you will see a panel with a list of options. Make sure that the Type option is clicked. The options in the right side of the box are the options that you will apply to the text style.How To Create a New CSS Text Style in Dreamweaver - rule box All of the options in this box are pretty self explanatory. You will need to select your font style, size, color, and your decoration. All of the other stuff can be left alone. After you have made your selections, click the Apply button and then the OK button. The box will now close.

    Applying the New Style to Other Text

    You can now apply the new style to other text. Type more text on your document. Highlight the text and right click on it. When the menu drops down, click CSS Styles > and the name of the style that you just created. That will apply the text style that you just created to the text that you just typed.

    How To Create a New CSS Text Style in Dreamweaver - new style created 

    You can create as many text styles as you want. Remember, when you start creating a lot of text styles, you will need to give them unique names to be able to quickly apply them to certain text.