Using CSS, we can manipulate just about anything.
Start with the style tags. Put them in the head section.
<style type="text/css"> <style>
Go back to the button, and add the class attribute.
<input type="button" value="Home" onClick="window.location='http://www.free2code.net'" class="home">
We use the class to alter stuff.
<style type="text/css">
.home {background-color: #33ccff;}
<style>
Any element that has the class home attatched to it will have a #33ccff background, no matter what that element is.
We can alter the border.
<style type="text/css">
.home {border-color: #33ccff;}
<style>
Of course you can mix these attributes, but I’ll leave them seperate so things are easy to understand.
Change the font color.
<style type="text/css">
.home {color: #ff0000;}
<style>
Lastly, we will change the dimensions of the button.
<style type="text/css">
.home {width: 250px; height: 150px;}
<style>
I think you get the idea by now. If you want to alter something, CSS is the way to go. you can pretty much change anything you want with good ol’ CSS. Next up is CSS mouseovers.
Continue to Page 3 »
In this tutorial:
