Pseudo classes
I think that the default hyperlinks and forms are pretty boring, so time to spice them up. =DFirst open up a new html document.
Add the following inbetween <head></head> CSS:
Code
<style>
a {font-family:Arial, Helvetica, sans-serif; color:#FF0000; text-decoration:none;}
a:hover {color:#0000CC;}
</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>:
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:
Code
.linkname {}
.linkname:hover {}
.linkname:hover {}
HTML:
Code
<a class="linkname" href="#">Home</a>
------------------
It's pretty much the same with forms.
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>
.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:
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>
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:
to
----------
Obviously the colors dont go but i was using them as an example.
Posted on Sunday 4th May 2008 at 05:07 PM
aa thats awsum :)