css em formularios

CSS em Formularios
::Objetivo::
Mostrar como personalizar um formulário de contato com uso de CSS.

::Um formulário padrão::
Um formulário de contato típico consta de: três campos de input para texto: nome, e-mail e assunto; um campo textarea para o texto da mensagem; um input tipo botão para envio da mensagem.

Vamos admitir nosso formulário "dentro" de uma tabela, com duas colunas e seis linhas, tudo conforme mostrado abaixo:
Parte superior do formulário
Formulário de contato
Nome

*e-mail

Assunto

*Mensagem

* Campos de preenchimento obrigatório
Parte inferior do formulário

::O HTML do formulário::
1.
2.
4.
5.
6. Formulário de contato
7.
8.
9.
10. Nome
11.
13.
14.
15. *e-mail
16.
18.
19.
20. Assunto
21.
23.
24.
25. *Comentários
26.
28.
29.
30.
32. * Campos de preenchimento obrigatório
33.
34.
35.

Nota: Este é o HTML da tabela mostrada acima.
Para efeito de clareza coloquei um cellpadding e uma borda na tabela mostrada e que não constam do HTML.
Em consequência se você copiar-colar o HTML acima, não verá as bordas da tabela e elas não interessam para nosso tutorial.

::O formulário estilizado::
Abaixo o formulário pronto, com as regras CSS aplicadas.
Mostro o formulário desde já, para que você tenha uma noção antecipada do final e com isto facilitar o entendimento do tutorial a medida que for lendo.

Parte superior do formulário
Formulário de contato
Nome

*e-mail

Assunto

*Comentários

* Campos de preenchimento obrigatório
Parte inferior do formulário

::Estilizando a "caixa" que contém o formulário::
A "caixa" que contém o formulário é a Tabela.
Para estilizar a tabela vamos atribuir-lhe uma "id" e escrever regras CSS para esta "id".
Escolhi o nome da id todoform
Acresento no HTML:
1.

E escrevo a seguinte regra CSS:
#todoform { background:#4f4f4f; /* uma cor escura para o