CSS
Tutor - Lesson 5
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.