One of the most popular CSS effects is causing links to change styles when a mouse "hovers" over them. We can create any kind of presentational change using pseudo-classes. They are given this name because they act as though an extra class attribute has been added to our HTML elements whenever a certain action occurs. To respond to the "hover" action, we would use the hover pseudo-class.
<html>
<head>
<title> Title of my webpage </title>
<style type="text/css">
a:hover { color: #ff0000; }
</style>
</head>
<body>
<p> My first paragraph. My first paragraph.
My <a href="#">first</a> paragraph. </p>
<p> My second paragraph. My second paragraph.
My second paragraph. </p>
</body>
</html>
Some other pseudo-classes common for links are link, visited, and active. If you're going to include more than one of these be sure to put them in the order link->visited->hover->active to be sure that browsers respond to them properly.
A word of caution: The ability to have your code react to user actions - and doing so using only HTML and CSS - is quite powerful. The hover pseudo-class in particular is useful. Unfortunately, Microsoft Internet Explorer only supports the hover pseudo-class when used on <a> anchor tags. Browsers such as Firefox and Apple's Safari will support pseudo-classes on any HTML element, allowing for many creative uses.
For IE, many Javascript hacks can be found to impersonate the CSS ability that it should support. In general, it is best to design your websites for browsers like Firefox that support modern web standards well. Later you should go back to see what extra "fixes" are possible to get your site to also work for IE.