Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Dreamweaver Tutorials > CSS Text Rollovers  

 

Featured Fireworks & Dreamweaver Template

Animals Template 6
Animals & Wildlife
$49.95

CSS Text Rollovers

Try out these cool text rollover effects using CSS style sheets. Cut and paste code provided.

CSS Styles are a simple and fast way of making your site look good. In this tutorial you will learn how to make cool text rollovers.

The trick is to use the a:hover style! If you work with Dreamweaver the steps to follow are given below:

  1. In your style sheet choose New
  2. Next choose Use CSS selector
  3. In the drop down menu choose a:hover
  4. Finally, Define your style. You can choose your font, color, bold, underline etc.
  5. You're done it! It's easy and fast and really cool!

Text Rollover Effect throughout the site

Copy this code between the head tags

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

Text Rollover Effect in a particular place of your site

Step 1: Paste this 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>

Step 2: Select the link style for the link. An example of the code is given below:

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

Learn more about CSS Styles here. Also take a look at our ready-made templates that use CSS Styles.

 


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Website Design? Choose from over 45000 templates!

create a free html5 website

Featured Template
Template # 31774
Type: JS Animated Full Site
Price: $65