Cool Text Effects Using CSS Styles in Dreamweaver

Tool(s) Required:

HTML Editor: Dreamweaver 4 or above
Recommended: Adobe Dreamweaver CS3

Cascading Style Sheets (CSS) Styles are very useful for maintaining a web site since its appearance (controlled by properties of HTML tags) can be updated from just one file. They are also used to enhance your site's look. In this article you will learn how to make cool text effects using CSS Styles using Macromedia Dreamweaver. Read our CSS Styles Tutorial

1. Text Links Rollover

This effect is got by using the hover property for the <a> tag or any named css style used for links. For defining the default text link rollover throughout the site you can set the a:hover style. Open your site in Dreamweaver and do the following:

1. Open any page of your site and select window > CSS Styles and Click the New CSS Style button (+ icon), a pop-up window will show up.
   1. Setting a:hover - Select Advanced in the Selector Type. Now select a:hover from the Selector list box.
   2. Setting any other link style's hover - if you have already created a css style called say "links", to set the links:hover style - Select Advanced in the Selector Type. Now type links:hover in the Selector list box space. [To use this style just select and right click the <a> tag in the tag selector located at the bottom left of the Document window. For the Set Class attribute select links from the list.]
2. Define the style in an existing Style Sheet, a new Style sheet or embedded in your current Document, and click OK.
3. In the CSS Style Definition pop-up window that appears give the Text specifications in the Category: Type. Now try the following effects separately or together:
   1. Tick the checkbox none if you don't want any underline to appear for the links on rollover.
   2. Tick underline if you want it to appear (this is usually used if the a:link or .links style is given the none property for no underline to appear for the links without rolling over them).
   3. Give the weight as bold.
   4. Change the link color property to something other than the a:link color.

2. Text Case Setting

In case you want a style that always displays in upper or lower case no matter how the text is typed you can set the Case property to capitalize, uppercase or lowercase in the Category:Type text specifications.

3. Text Spacing

To make the text appear neatly spaced on your site and for easy readability you can set the Line Height property in the Category:Type text specifications.
Tip: Set the line height to approximately 1.5 (one and a half) times the font size for it to look smart. The content in our site has a font size of 11 and line height of 16.

4. Line-through Effect

If you are selling products on your site you might want to give a discount and show the old and new prices (example: $100 $50). To give a strike through effect for the old price you can make a style with the Line-through property in the Category:Type text specifications ticked.

Absolutely FREE Web Templates
Check out these quality free web templates and download them without any registration or sign-up!

FREE Flash Actionscript & Animation Guide
Learn Flash the easy way using these easy-to-follow tutorials! Get your basics right or learn advanced flash actionscript!

Quality Dreamweaver Templates
Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization