Hi

How do I make a simple CSS form with its own css style sheet? Do I put it in a <span> or something i.e I want a certain style of form (already have the CSS) but it is having difficluty becuase of conflicting element names. I would rather create a seperate style sheet for one single stand alone contact form.

By the way if there is a link to a good example CSS form with the HTMl code and the CSS code seperate that would be helpful..

Thanks

Wrap the form with a ID and use the ID as a base for your class...

For example:
CSS:

/* Contact form styling */ <-- Comment it for easy finding
#myform {}
#myform label {} <-- Only label inside #myform will change others won't
#myform fieldset {} <-- Only fieldset inside #myform will change others won't
#myform input {} <-- Only input inside #myform will change others won't
...

HTML:

<form action="post" id="myform">
...
</form>

So you don't have to get another stylesheet...

Hope that help...

Hi

This is how the HTML stacks up

<DIV id="internships-form">

<form action="/cgi/formmail" method = "POST" name="Approvedcv.co.uk">
<input type=hidden name="recipient" value="customerservices@approvedcv.co.uk">
<input type=hidden name="redirect" value="http://www.approvedcv.co.uk/thanks.html">

<DL class=name-block>

<DD>
<P class="exp"><LABEL for=work_phone>First Name</LABEL> 
 
  <INPUT class=txt id=work_phone 
name=first_name> 
<P class="exp"><LABEL for=work_phone>Last Name</LABEL> <INPUT class=txt 
name=last_name> 
<P class="exp"><LABEL for=work_phone>Contact Phone</LABEL> <INPUT class=txt
name=contact_phone> 
<P class="exp"><LABEL for=contact_email>Contact E-Mail</LABEL> <INPUT class=txt 
id=contact_email name=contact_email> 
<P class="exp"><LABEL for=message>Enquiry</LABEL> <TEXTAREA id=message name=message rows=10 cols=30></TEXTAREA> 
<P class="exp"><LABEL>&nbsp;</LABEL> <INPUT class=btn type=submit value=Submit name=submitted> <BR></DD></DL>
</FORM></DIV>

This is the CSS

#internships-form {
				clear: both;
			}
			input.txt, textarea, select {
				background-color: #ffffff;
				border: 1px solid #003366;
				padding: 4px;
			}
			input.btn {
				padding: 2px 6px; 
				font-weight: bold;
				color: #000000;
				background-color: #ffffff;
				border: 1px solid #003366;
			}		
			label, dl dt {
				color: #003366;
				font-weight: bold;
			}
			#internships-form textarea {
				width: 330px;
			}
			#internships-form p {
				margin: 0.75em 0 0 0;
				clear: both;
			}
			#internships-form p label {
				display: block;
				float: left;
				width: 150px;
			}
			#internships-form p input.txt {
				width: 330px;
			}
			textarea#message {
				width: 330px;
				height: 150px;
			}
			
			/* Name Block */
			dl.name-block {
				padding: 0;
				margin: 0;
			}
			dl.name-block dt {
				float: left;
				width: 150px;		
				padding: 0;
				margin: 0;
				font-weight: bold;			
			}
			dl.name-block dd {
				padding: 0;
				margin: 0 0 0 150px;			
			}
			* html dl.name-block dd {
				padding: 0 0 0 153px;
				margin: 0;
			}
			dl.name-block dd input.txt {
				display: block;
				width: 10em;
			}
			dl.name-block dd label {
				display: block;
				color: #003366;
				font-size: 0.75em;
				font-weight: normal;
			}
			dl.name-block dd label.first {
				float: left;
				width: 18em;
			}
			dl.name-block dd label.last {
				margin-left: 18em;
			}
			* html dl.name-block dd label.last {
				margin: 0;
			}

form is here http://www.approvedcv.co.uk/order.html - as you can see there are just white spaces no border? I really HAVE tried to fix it - it must be some tiny snippet of code thats wrong.

What border are you looking for? Perhaps you should add a class for your form?

<form action="/cgi/formmail" method = "POST" name="Approvedcv.co.uk" id="myform">

CSS:

#myform {border: 1px solid #000;}

Like this?

Hope that help...