Cascading Style Sheets: A Primer
Computing Resources >> Instruction >> Tutorials >> Web Development >> CSS 

What Is CSS?

Style vs. Markup

Syntax & Rules

Methods of Use

Writing a Style Sheet

Putting It All Together

CSS Resources

Evaluate this Tutorial


Creating Roll-Overs with CSS

Many people still use Javascript to create roll-over links. Using Javascript mandates that the developer create at least two different image files for the effect to work correctly. When someone "rolls over" a linked image with their mouse/cursor, Javascript loads another image...hence the name roll-overs. If you're not sure what a roll-over is, sit tight. The problem with using Javascript roll-overs is threefold. First, Javascript can sometimes be problematic for old browsers. Second, using images requires the developer to have access to some kind of image manipulation program such as Photoshop which can be expensive...and creating images can be very time consuming. Third, images take longer to load than a simple CSS text file.

Technically, we will be using something called pseudo-classes to create CSS roll-overs. A pseudo-class is just that; it's not exactly a class of its own, but it does have special functions. Hypertext links or anchor tags (<a>) have special pseudo-classes. Let's add a few lines to our style sheet and I'll show you what I'm talking about.

body {color: black; font-size: 12px; font-family: Helvetica, Arial, non-serif;}
a:link {color: #FF8C00;}
a:visited {color: #FF8C00;}
a:hover {color: #FF8C00; background: #ADD8E6; text-decoration:none;}
a:active {color: #FF0000;}

Example of these styles in action

Explanation: These four new lines do quite a bit of work with very little time investment. You'll notice that I've used hex codes instead of color names. #FF8C00 is Dark Orange, #ADD8E6 is Light Blue, and #FF0000 is Red. The first (a:link) styles all of your links in Dark Orange. That's simple enough. The second (a:visited) styles (or keeps) all visited links Dark could easily change the color of all visited links by changing the hex code or putting in a different color name. The third (a:hover) makes the roll-over effect. When a user hovers or mouses over the link, the background changes to Light Blue, the text stays Dark Orange, and the underline disappears.. If you don't like those colors, just change them for a different effect...make it as obnoxious or as subtle as you want...roll-overs were intended to capture attention. If you want to keep the underline on the hyperlink, just leave out the text-decoration declaration and it will default to underline. The last line (a:active) is optional. The active link is simply the color that the linked text changes to while the new page is loading. If a user has a broadband connection, many times the new page will load so quickly that they won't even notice an active link. Users with a dial-up connection, however, may appreciate this added feature. You should also notice that when you do this, your <a> tags will inherit all the declarations you wrote for the rule governing the <body> tag. So they (your links) will also be 12 pixels high, in the same font, but their colors are different and therefore, the declarations made earlier in the <body> tag (at least the ones concerning color) are overridden. If you wanted your links to be bigger or in a different font, you'd simply add those declarations to the appropriate CSS rules (which in this case are the anchor pseudo-class selectors which we've set up).
Important: When you write your link pseudo-classes in your style sheet, make sure they appear in the same order as above or the hover effect/roll-over may not work.

It's very easy to mix up all these stylistic changes to create very profound roll-over effects. You can change the font, the text size, the background color, you can underline the link, remove the underline, and more. It's much, much easier to do this with CSS than with Javascript and images.

next section >


Watch the video
choose format/speed
media dial-up | broadband

© 2003 Chad Hutchens | iSchool | UT Austin | webmaster