<form method="post" action="">
	<fieldset>
	<h1>Registro</h1>
	<p>Registrate ahora! es gratis</p>
 
	<label for="nombre" class="nombre">
	Nombre
	<span>Agrega tu nombre</span>
	</label>
	<input type="text" name="nombre" id="nombre" />
 
	<label for="email" class="email">
	E-mail
	<span>Agrega un correo valido</span>
	</label>
	<input type="text" name="email" id="email"/>
 
	<label for="pass" class="pass">
	Password
	<span>5 caracteres como minimo</span>
	</label>
	<input type="password" name="pass" id="pass"/>
 
	<input type="submit" id="registrar" value="Registrarme"/>
	</fieldset>
</form>

fieldset{
        margin:auto; width:475px;
	overflow:hidden; padding:30px;
}
h1{
	margin:10px 0 0 0;
	font-size:4.5em;
}
p{
	margin:0 0 30px 0; padding:0 0 5px 0;
	font-size:10px;
	border-bottom:1px solid #cfe0e9;
}
label{
	float:left; /* Importante, para la alineación */
	width:200px; /* ancho del label */
	font-size:2.8em;
	margin:5px 0 15px;
}
 
input{
	float:left;/* Importante, para la alineación */
	width:245px; height:36px;/* Medidas del Input */
	margin:0 0 15px 0; padding:15px;
	color:#ccc;font-size:2em;
}
span{
	font-size:10px;/* Tamaño más pequeño para las indicaciones */
	display:block; /* hace que salte de linea */
}
/* Personzaliando el botón de registrar */
#registrar{
	float:left;
	padding:0; margin:15px 0 0 140px;
	background:#d0e8f7; color:#418eb6;
	width:185px;height:45px;
}
/* Hover a nuestro Botón 
   No funciona en IE6 (Uno de los peores navegadores) */
#registrar:hover{
	background:#418eb6; color:#d0e8f7;
}
/* Opcional - Bordes Redondeados
   Solo funciona con Firefox / Safari / Google Chrome */
input,#registrar{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
/* Si usan esto ultimo no validara, porque aun no lo han estanderizado
   pero funciona a la perfección - salvo con IE (la oveja negra) */

h1,p,label,span{
	background:url(images/txt-form.png) no-repeat;/* Imagen con todos los textos para h1,p,label,span */
	text-indent:-9999em;/* Hace desaparecer por arte de magia los textos xD! y solo quedaran las imagenes */
}
h1{
	margin:10px 0 3px 0;
	background-position:0 0; /* Posición inicial de la imágen */
	width:200px; height:45px;/* Medidas de nuestro título */
}
p{
	margin:0 0 50px 0;
/* La posición disminuye según la altura donde se ubique la parte que quieres mostrar */
	background-position:0 -50px;
	width:143px;height:9px;
}
label{
	float:left;/* Importante para la alineación */
	width:200px;/* ancho que heredaran todos los label */
	font-size:2em;
	margin:12px 0 15px 0;
}
span{
	display:block; /* hace que salte de linea */
}
.nombre{
/* Como esta parte comenzaba en Y = 59, le quitamos -59px a la posición */
	background-position:0 -59px;
	height:23px; /*Importante poner la altura que queremos mostrar */
}
.nombre span{
	background-position:0 -94px;
	height:10px;
}
.email{
	background-position:0 -104px;
	height:23px;
}
.email span{
	background-position:0 -138px;
	height:10px;
}
.pass{
	background-position:0 -148px;
	height:23px;
}
.pass span{
	background-position:0 -182px;
	height:8px;	
}

input{
	float:left;
	background:url(images/input.png) no-repeat; /* imagen con esquinas redondeadas para todos los input */
	width:245px; height:36px;
	margin:0 0 25px 0; padding:15px;
	color:#ccc; font-size:2em;
}
 
#registrar{
	float:left;
	margin:15px 0 0 140px;padding:0;
	background:url(images/registrar.png) 0 -45px;/* Otra vez usando las posiciones */
	width:185px;height:45px;/* importante definir la altura*/
	color:#418eb6;
}
/* Hover a nuestro Boton 
   No funciona en IE6(para variar..) */
#registrar:hover{
	background-position:0 0;
	color:#d0e8f7;
}