HTML5 Y CSS PARTE 2

Como podrás  observar, visualmente es bastante básico;  para mejorarlo estéticamente vamos a crear un código CSS.

El código CSS es el siguiente (copiar todo lo que está entre corchetes):

[.contact_form h2 {

    background: none repeat scroll 0 0 #c1bfbf;

    border-radius: 5px;

    color: #164a20;

    display: block;

    font-family: calibri;

    font-size: 20px;

    padding: 5px;

    text-shadow: 1px 1px 1px #CCCCCC;

    width: 433px;

}

/*--- estilos para los ul y li del formulario ---*/

.contact_form ul {

    width:500px;

    list-style-type:none;

margin:0px;

padding:0px;

}

.contact_form li{

padding:12px; 

border-bottom:1px solid #eee;

position:relative;

} 

.contact_form label {

    color: #555555;

    display: inline-block;

    float: left;

    font-family: calibri;

    font-size: 13px;

    font-weight: bold;

    margin-top: 3px;

    padding: 3px;

    width: 90px;

}

.contact_form input {

height:20px; 

width:220px; 

padding:5px 8px;

}

.contact_form textarea {

padding:8px; 

width:300px;

}

.contact_form button {

margin-left:90px;

}

/*----- estilos visuales de los elementos --------*/

.contact_form input, .contact_form textarea { 

border:1px solid #aaa;

box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;

border-radius:2px;

color: #888;

font-size: 12px;

padding-right:30px;

-moz-transition: padding .25s; 

-webkit-transition: padding .25s; 

-o-transition: padding .25s;

transition: padding .25s;

}

.contact_form input:focus, .contact_form textarea:focus {

background: #fff; 

border:1px solid #555; 

box-shadow: 0 0 3px #aaa; 

padding-right:80px;

}

/* === Estilos de Validacion === */

.contact_form input:required:valid, .contact_form textarea:required:valid {

box-shadow: 0 0 5px #5cd053;

border-color: #28921f;

}

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {

box-shadow: 0 0 5px #d45252;

border-color: #b03535

}

/* === Estilos del boton de Envio === */

button.submit {

    padding: 9px 17px;

   font-family: Helvetica,calibri, Arial, sans-serif;

   font-weight: bold;

   line-height: 1;

   color: #444;

   border: none;

   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);

   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));

   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);

   background-color: #fff;

   border: 1px solid #f1f1f1;

   border-radius: 10px;

   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

}

button.submit:hover {

opacity:.55;

cursor: pointer; 

color: #fff;

}

button.submit:active {

border: 1px solid #222;

box-shadow: 0 0 10px 5px #444 inset; 

}]