CSS styles sheets add beauty and formatting to your web pages. They are easier and faster to create and use. Text roll over effect is an interactive effect produced when the cursor is moved over the text some action occurs. It may be the change in color, shape, pop-up etc.CSS text rollovers can be created using Dreamweaver. Basic knowledge of Dreamweaver and CSS are required for this. To get basic idea about Dreamweaver and CSS see our Dreamweaver and CSS tutorials. This tutorial helps you in the creation of Text rollovers using CSS in DreamweaverMX.

Creating Text rollovers using CSS

1. Use the a: hover style and follow the below steps
2. Create a new CSS style by choosing New in your style sheet and Use CSS selector ,choose a:hover in the drop down menu .Define your new style by choosing the appropriate font, color, bold, underline and other features.
3. You have successfully created a ne CSS style. Now we have to give the Text rollover effect throughout the site. Copy and paste the below code between the head tags.

    

   <style type="text/css">
   <!-- a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #990000} -->
   </style>

4. For creating the text rollover effect in a particular place of your site caopy and paste the below code between the head tags

    

   <style type="text/css">
   <!--
   .links { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #003399}
   .links:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FF8B22; text-decoration: none}-->
   </style>

5. The below code is for selecting the link style for the link

<a href="link.htm" target="_parent" class="links">yahoo</a>

 

6. The tutorial for creating rollover using CSS with DreamweaverMX is Finished