A very popular use of style sheets is to remove the underline from links...
<html>
<head>
<title></title>
<style type="text/css">
a:link, a:visited, a:active { text-decoration:none }
</style>
</head>
<body>
What happens if you <a href="page.html">click here</a>.
</body>
</html>
Notice a couple things here. 1) link, visited and active are pseudo-classes (or sub-classes) of the A element. There are not a whole lot of those. And 2) you can apply the same property instruction set to more than one element by separating them with commas. (You probably won't be doing much of that either.)
Another pseudo-class of the A element that is kind of nifty is hover. Hover is when the mouse is over the link. Here we'll do a simple color change...
<html>
<head>
<title></title>
<style type="text/css">
a:link, a:visited, a:active { text-decoration:none }
a:hover { color:#ff3300 }
</style>
</head>
<body>
What happens if you <a href="page.html">click here</a> all the time.
</body>
</html>
This effect is very simple and kinda neat. You can apply any sort of property change here, but if you get too crazy, you'll make an ugly mess. Keep it simple and subtle.
Remember... all things in moderation. Don't get too crazy with your style sheet efforts. The more you try to control the appearance, the more likely your page will look all screwed up to others. As an example, here are some screen shots of CSS demos taken from Microsoft's site. They are shown through Netscape 4.7 and IE 5.0. I think you'll find them interesting.
| Netscape Navigator | Internet Explorer |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
Half the time the creation falls apart in their own browser, not to mention someone else's browser. The lesson? Take it easy with the fancy stuff, don't get too precise, and always check your pages in a couple browsers.
| CSS Tutor |
| Lessons: Intro 1 2 3 4 5 6 CSS Reference |
| HTML 4.0 Reference Google Groups (Advanced Search) |
|
|
|
|
