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


Featured Fireworks & Dreamweaver Template

Photography Template 5
View Inner Page

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} -->

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}

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 60000 templates!

Learn How to Create a Simple HTML5 Website

Learn how to create a simple Html5 website

Bootstrap 3 Responsive Website Tutorial

Bootstrap 3 Responsive Website Tutorial

Video Tutorial - Create a simple responsive website using Dreamweaver


Best Wordpress Themes of 2017

best wordpress themes of 2017

Featured Template
Template # 66044
Type: Vendors
Price: $17