CSS FAQ #11 How can I handle multiple different forms without tables?

[Diane]

I have read through the CSS FAQs and have converted one of my sites (almost) to a table-free layout using css (not bad for one afternoon, eh?). The negative positioning thing always put me off, so I was delighted to learn you don't have to code that way.

I have also created a table-free form using the code in FAQ #11 as a starting point and the form appears to look good in preview mode. However, I need different syles for different forms, so how would I go about creating several different css styles for my forms please?

Eg, Form 1 - check boxes on the left, label on the right (already done)
Form 2 - label above textarea, label above select
Form 3 - label on the left, select on the right
Edited to add: Labels are of different sizes in each case.
Sorry - edited again to add: Would it be better to use inline styling as required rather than try to define everything in the stylesheet?

Thank you very much for your help.
Diane

[_Aerospace_Eng_]

i would give the inputs or w/e other type of input u have in the forums different classes different for each form then define them in your style sheet, just in case you want to change them later you wont have to in every page and edit it
input.someclassname {
background:#0000FF;
}
should work for the buttons and text fields

[rmedek]

Originally Posted by Diane

... Form 1 - check boxes on the left, label on the right (already done)
Form 2 - label above textarea, label above select
Form 3 - label on the left, select on the right
Edited to add: Labels are of different sizes in each case.
Sorry - edited again to add: Would it be better to use inline styling as required rather than try to define everything in the stylesheet?

Thank you very much for your help.
Diane

Usually it's always better to use an external stylesheet. This way all changes to the style can be done via one page, rather than hunting through your various html pages. Also, this way the style is cached, and only has to be loaded once.

As far as styling different forms, I would assign each form a different id, then use descendent selectors to apply styles. I.e.:

html:

<form id="oneform">...</form>
<form id="anotherform">...</form>

css:

#oneform {
 ...styles...
 }

#oneform input {
 ...styles for inputs, etc...
 }

#oneform input.class {
 ...styles for a specific class...
 }

#anotherform { 
 ...styles...
 }

#anotherform input {
 ... styles for inputs, etc...
 }

etc.

Hope this helps,

[Diane]

Mmm. I think I understand. So it would look something like this? Or am I completely off track here?

#oneform: form p label {
display: inline;
float: left;
width: 100px;
}

based on another style I set for links
a.nav:link {
color:#000000;
text-decoration:none;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
}

Defining different link styles was a breeze, but I'm not sure this technique applies to other tags?

I'm sorry to be so dense!

Thank you again.
Diane

Edit - don't worry - I think the penny has dropped! I think I've got it now!

[rmedek]

Originally Posted by Diane

Mmm. I think I understand. So it would look something like this? Or am I completely off track here?

#oneform: form p label {
display: inline;
float: left;
width: 100px;
}

. . .

Edit - don't worry - I think the penny has dropped! I think I've got it now!

Cool, although I should clarify that bit at the top should read:

#oneform form p label {
   display: inline;
   float: left;
   width: 100px;
 }

(no ":") It essentially means a label within a p within a form within the id "oneform." If you look up "descendant selectors" in Google you'll get more than you ever wanted to know about it.

[Diane]

Excellent - thank you!
Diane