In the first of many CSS topics we wish to cover, we take a look at how you can style your forms using CSS.
The first style area that we'd like to cover is the margin area of the form tag.
The form tag, unstyled, is notorious for leaving empty space at the bottom.
The following code (yes, we know its old school html) illustrates the problem).
Code:
<html>
<head>
<title>CSS Form Styles - 1 </title>
</head>
<body>
<table bgcolor="#000000" cellpadding="0" cellspacing="0">
<tr><td>
<form bgcolor="#FFFFFF">
<textarea rows="10" cols="20">sample</textarea>
</form>
</td></tr></table>
</body>
</html>
As you can see here
http://www.devlib.org/samples/form-1.html there is an ugly black space at the bottom of the form.
To remove or change this margin on all forms you use the following syntax.
Code:
<html>
<head>
<title>CSS Form Styles - 1 </title>
<style>
form { margin: 0 }
</style>
</head>
<body>
<table bgcolor="#000000" cellpadding="0" cellspacing="0">
<tr><td>
<form bgcolor="#FFFFFF">
<textarea rows="10" cols="20">sample</textarea>
</form>
</td></tr></table>
</body>
</html> As you can see with
http://www.devlib.org/samples/form-2.html the margin has been eliminated.
Needless to say, if you then want a form or two on your site, to have borders and margin you can assign them specific styles, like this code illustrates.
Code:
<html>
<head>
<title>CSS Form Styles - 1 </title>
<style>
form { margin: 0 }
.form1 { margin: 10px }
</style>
</head>
<body>
<table bgcolor="#000000" cellpadding="0" cellspacing="0">
<tr><td>
<form bgcolor="#FFFFFF">
<textarea rows="10" cols="20">sample</textarea>
</form>
</td></tr></table>
<p> </p>
<table bgcolor="#000000" cellpadding="0" cellspacing="0">
<tr><td>
<form bgcolor="#FFFFFF" class="form1">
<textarea rows="10" cols="20">sample</textarea>
</form>
</td></tr></table>
</body>
</html> As you can see from this sample
http://www.devlib.org/samples/form3.html you now have a neat equal sized border around the form.
CSS - Form Margins 
