7. Changing Styles In The CSS File



We have already learned how we can link an html file with an external css file. Also we know how to change a text style. But let's learn how to modify a style (a class) without directly editing the css file.

Open the file index.html from template/html/html_version.

As we have already shown you the CSS palette is in the right corner of the Dreamweaver desktop. Let's modify the "text1" class the one that defines how looks the "bold text" of all blocks of text. To modify its properties simply select it from the CSS palette to display its properties and change them according to your needs. You can change, add or delete properties.

Go and change the text color by clicking on the color preview opening the color picker palette. See the changes. All "bold texts" changed their color.

If you want to access all the properties go on and right-click on the ".text1" class and from the menu choose "Edit..."

The CSS rule definition window appears and here you'll find all the CSS rules/properties that you can add:

The first section is Type and you can see that this section has 4 sections defined: Font, Size, Weight and Color. You can enter values for the rest of the sections and Dreamweaver will generate the CSS code for you. Go to the other sections and see what other properties you can add. Note that all the values that you introduce will change only the text that is part of the ".text1" class. To delete a property simply delete its value leaving the space blank.

To delete a property the CSS Styles preview palette right-click on a property and from the menu choose Delete

In our template the class that defines all the text in general is the "td" class. This means that it applies to all content inside a <td></td> tag

If you modify its properties you will affect all the text that doesn't have specified a class. For example, you'll affect all the normal weight text in all text blocks but not the bold text that is part of the ".text1" class or the orange text that is a link and is part of "a" link class.