Personalizando elementos del formulario con CSS

En este artículo quiero tratar el tema sobre cómo ubicar y personalizar los componentes html de un formulario mediante reglas CSS, para mejorar el aspecto visual de nuestra aplicación.
Hoy en día son pocos los sitios que no cuentan con algún formulario, ya sea para autenticación o algún dato que necesita entrar el usuario a la aplicación. Supón que tenemos el siguiente formulario y queremos darle una ubicación específica a las etiquetas con respecto a los campos de texto.

El código HTML del ejemplo anterior es el siguiente:

   1: <form class="my_form">

   2:                 <fieldset>

   3:                     <legend>Alta en el sistema</legend>

   4:                     <label for="nombre">Nombre</label>

   5:                     <input type="text" id="nombre" />

   6:                     <label for="apellidos">Apellidos</label>

   7:                     <input type="text" id="apellidos"/>

   8:                     <label for="dni">DNI</label>

   9:                     <input type="text" id="dni" maxlength="9" />

  10:                     <label for="contrasena">Contraseña</label>

  11:                     <input type="password" id="contrasena" />

  12:                     <input class="btn" type="submit" value="Registrarme" />

  13:                 </fieldset>

  14:             </form>

Si quisiéramos mostrar los <label> encima de los campos de texto aplicando unos estilos sencillos podríamos lograr el efecto mostrado:
Regla CSS:

   1: label { 

   2:      display: block; 

   3:      margin: .5em 0 0 0; 

   4: }

   5: .my_btn { 

   6:       display: block; 

   7:       margin: 1em 0; 

   8: }

Al botón también se le añade una regla CSS para mostrarlo como elemento de bloque y un margen para lograr el efecto deseado.
Si quisiéramos mostrar nuestros elementos <label> al lado izquierdo de los campos de texto, para lograr este resultado:

Código HTML:

   1: <form class="my_form">

   2:             <fieldset>

   3:                 <legend>Alta en el sistema</legend>

   4:                 <div>

   5:                     <label for="nombre">Nombre</label>

   6:                     <input type="text" id="nombre" />

   7:                 </div>

   8:                 <div>

   9:                     <label for="apellidos">Apellidos</label>

  10:                     <input type="text" id="apellidos"/>

  11:                 </div>

  12:                 <div>

  13:                     <label for="dni">DNI</label>

  14:                     <input type="text" id="dni" maxlength="9" />

  15:                 </div>

  16:                 <div>

  17:                     <label for="contrasena">Contraseña</label>

  18:                     <input type="password" id="contrasena" />

  19:                 </div>

  20:                 <input class="my_btn" type="submit" value="Registrarme" />

  21:             </fieldset>

  22:         </form>

A las reglas le agregaríamos:

   1: div { 

   2:      margin: .4em 0; 

   3: } 

   4: div label { 

   5:      width: 25%; 

   6:      float: left; 

   7: } 

   8: div input { 

   9:      width: 70%; 

  10: }

Combinando los ejemplos anteriores con otras reglas CSS además de posicionarlos se pueden cambiar el aspecto y comportamiento visual de los componentes utilizando pseudo-clases después de los selectores.
Espero les haya servido de ayuda.