2 Domain Hosting

Web Site Design | Web Site Promotion | Web Hosting | Domain Name Registration

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.

Articles

Domain Name Registration - Free Web Hosting -  Email Tips and Tricks -  Home Based Web Business - Work at Home - Chat Rooms  - Voice Chat - Cell Phone - Phone Calls - Love Dating - Online Dating Services