CSS não é fácil !

Olá pessoal!!

Dizer que CSS é simplers é o mesmo que um chinês dizer que falar chinês é fácil....

Sou programador Flex/Flash Builder e até agora apenas usava o CSS para formatar tipos de letras, tamanhos, etc...no entanto tenho agora um projecto que terá de ser visualizado em navegadores moveis (iPad, iPhone, etc...) e como não há suporte flash nos equipamentos alvo decidi que a melhor forma é fazer em PHP.

Nota: Seu que o Flash Builder 4.5.1 tem suporte para iOS mas isto não se trata de uma aplicação mas sim uma pagina web.

Como sou um perfeccionista, e apesar de não estar muito dentro do HTML, quero fazer as coisas como deve ser e fazer tudo sem o uso de tabelas, para isso o CSS é obrigatório.

Voces podem até rir mas passei os últimos 3 dias INTEIRINHOS a tentar fazer 2 caixas (login e registo) e acreditem que até agora não consegui o resultado esperado que não é nada do outro mundo!! Caixas normalissimas com um conjunto de campos para preencher. Coisa que perderia apenas meia horita no Flex, no CSS já lá vão 3 dias.

Eu não tenho acesso ao Internet Explorer e por isso não tenho a mínima noção de como aparece nesse browser.

Tenho lido e lido e lido e pesquisado e tentado entender, mas o que é certo é que CSS não é facil devido a quantidade de formas diferentes de chegar ao mesmo fim (infelizmente para mim ainda não encontrei a forma que resolve o meu fim).

Gostava que algum dos gurus do CSS aqui do forum me pudesse dar uma dicas para que eu possa começar a entender um pouco o CSS, por favor não me mandem para www.maujor.com por é ai que eu tenho aprendido o pouco, ou nada, que sei de CSS.

PERGUNTA:

Existe uma forma unica de fazer o que quer que seja em CSS? Ou há varias maneiras, todas elas correctas e vai da escolha do programador? Por exemplo uma das minhas grandes duvidas é porque estou uso <loginForm> e não por exemplo <div id="loginForm">?

O que é mais correcto de se usar??

CSS

<style type="text/css" media="all">

/ LOGIN FORM /
#loginForm { font: 11px Verdana, Arial, sans-serif; width:250px; color:#000; border:2px #900 solid; margin-bottom:10px }
#loginForm title { color:#FFF; font-weight:bold; text-transform:uppercase; background:#900; padding:5px 0px 5px 10px; display:block }
#loginForm p { display:block; margin:5px 10px 5px 10px }
#loginForm label { width:60px; text-align:right; display:inline-block }
#loginForm input { width:150px; border:solid 1px #900 }

#loginForm submitArea { display:block; text-align:right; margin:5px 20px 5px 10px }
#loginForm submitArea label { width:auto }
#loginForm submitArea input { width:auto }
#loginForm submitArea p { display:inline; margin-left:0px; margin:0px }

/ REGISTER FORM /
#registerForm { font: 11px Verdana, Arial, sans-serif; width:250px; color:#000; border:2px #900 solid; margin-bottom:10px }
#registerForm title { color:#FFF; font-weight:bold; text-transform:uppercase; background:#900; padding:5px 0px 5px 10px; display:block }
#registerForm p { display:block; margin:5px 10px 5px 10px }
#registerForm label { width:90px; display:inline-block; text-align:right }
#registerForm input { width:120px; border:solid 1px #900 }

#registerForm submitArea { display:block; text-align:right; margin:5px 20px 5px 10px }
#registerForm submitArea label { width:auto }
#registerForm submitArea p { display:inline; margin:0px; margin-right:0px }

#registerForm sexFieldArea { display:block; margin:5px 10px 5px 10px }
#registerForm sexFieldArea p { display:inline-block; margin:0px }
#registerForm sexFieldArea input { width:auto }
#registerForm sexFieldArea label#radioLabel { width:auto; margin:0px }

</style>

HTML

<form action="" id="loginForm">
 <title>Efectue o login</title>
 <p><label>Email:</label> <input type="text"/></p>
 <p><label>Password:</label> <input type="password"/></p>
 <submitArea>
 <p><label>Manter login activo </label> <input type="checkbox"/></p>
 <p><input type="submit"/></p>
</submitArea>
</form>

<form action="" id="registerForm">
<title>Registar novo utilizador</title>
 <p><label>Primeiro nome:</label> <input type="text"/></p>
 <p><label>Ultimo nome:</label> <input type="text"/></p>
 <p><label>E-mail:</label> <input type="text"/></p>
 <p><label>Repetir email:</label> <input type="text"/></p>
 <p><label>Password:</label> <input type="password"/></p>
 <sexFieldArea>
 <p><label>Sexo:</label></p>
 <p><input type="radio" /></p>
 <p><label id="radioLabel">M</label></p>
 <p><input type="radio" /></p>
 <p><label id="radioLabel">F</label></p>
 </sexFieldArea>
 <p><label>Password:</label> <input type="text"/></p>
 <submitArea>
 <p><input type="submit"/></p>
</submitArea>
</form>

NOTA: Eu nesta fase que estou a aprender, decidi definir os estilos para as 2 caixas de forma separado. Sei que com um pouco mais de tempo será possível eliminar algumas linhas da formatação CSS.

PERGUNTAS:

0. Esta estrutura HTML está correcta? De certeza que deve haver umas centenas mais de fazer o mesmo mas esta está correcta? Ou o que está errado fazer?