Pseudo classes

Name: Pseudo classes
Rating: 3 (1 reviews)
Author: JakkyD

I think that the default hyperlinks and forms are pretty boring, so time to spice them up. =D

First open up a new html document.

Add the following inbetween <head></head> CSS:

CSS Code

<style>
a {font-family:Arial, Helvetica, sans-serif; color:#FF0000; text-decoration:none;}
a:hover {color:#0000CC;}
</style>

or link it to an external css page.
HTML inbetween <body></body>:

CSS Code

<a href="#">Home</a>

This will now change Home to Home when you scroll over it.

Note this will do this to all hyperlinks. To do this to seperate ones use: CSS:

CSS Code

.linkname {}
.linkname:hover {}

HTML:

CSS Code

<a class="linkname" href="#">Home</a>

------------------

It's pretty much the same with forms.

CSS:

CSS Code

<style>
.formname {font-family:Arial, Helvetica, sans-serif; color:#FF0000; text-decoration:none; background:#999999; border:1px #333333 solid;}
.formname:hover {color:#0000CC; background:#000000; border:1px #ff0000 solid;}
</style>

HTML:

CSS Code

<form action="" method="">
Username: <input type="text" class="formname" name="user" maxlength="30" value="">
Password: <input type="password"  class="formname" name="pass" maxlength="30" value="" />
<input type="submit" class="formname" value="Login">
</form>

That is for seperate forms because its using classes but if you want to do all of them replace .formname with input.

Results:

TutorialNinja Image

----------

Obviously the colors dont go but i was using them as an example.

Author:

JakkyD

Views:

2,115

Rating:

Posted on Sunday 4^th May 2008 at 05:07 PM

jambomb

aa thats awsum :)