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.

Please Like, Tweet or Share this page if you found this resource useful!

Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!