Hojas de estilo CSS

David Hernández

Programación HTML II

Instituto IACC

01/12/2019
 Desarrollo

/* cambiamos el color de fondo fuera del form*/

body{

background-color: #E7E4E4;

form{

width:auto;

padding:16px;

font:oblique bold 100% cursive;

margin:auto;

/* cambiamos formato al titulo */

#titulo{

width:900px;

margin-left:15%;

background-color:#ccc;
 text-align: center;

border-radius: 5px;

box-shadow: 10px 5px 5px black;

/* damos un formato al form */

#encuesta{

width:900px;

margin-left:15%;

background-color:#ccc;

border-radius: 5px;

box-shadow: 10px 5px 5px black; /* colocamos sombra al div */

.irut{

font-color:white;

.areatexto{
}

/* cambios al boton de enviar formulario */

.btn{

font-size:12px;

font-family:Verdana,Helvetica;

font-weight:bold;

color:white;

background:#638cb5;

border:0px;

width:150px;

height:20px;

border-radius: 5px;

box-shadow: 10px 5px 5px black;

margin-right: 20px;

cursor: pointer;

/* cambios al boton limpiar datos del formulario */

.btn2{

font-size:12px;

font-family:Verdana,Helvetica;
 font-weight:bold;

color:white;

background:#638cb5;

border:0px;

width:150px;

height:20px;

border-radius: 5px;

box-shadow: 10px 5px 5px black;

margin-right: 20px;

cursor: pointer;

#titulomostrar{

width:900px;

margin-left:15%;

background-color:#ccc;

text-align: center;

border-radius: 5px;

box-shadow: 10px 5px 5px black;

}
table {

width: 100%;

border: 1px solid #000;

th {

width: 25%;

text-align: left;

vertical-align: top;

border: 1px solid #000;

border-collapse: collapse;

padding: 0.3em;

caption-side: bottom;

}
A medida que hemos avanzado con los códigos de programación en HTML, vamos encontrando

más detalles que podemos aplicar al formulario, en esta ocasión quise hacer algo más simple,

donde poder demostrar algunos cambios realizados a la estructura original, y donde me di cuenta

que esta estructura es de vital importancia al momento de aplicar css, ya que cuando necesitaba

cambiar solo una caja, me cambiaba varias, y esto era porque con anterioridad no había aplicado

bien las clases o id en la cajas, pero ahora la he ordenado de mejor manera, aplicando un poco el

contenido visto durante esta semana.

Seleccione un tono cálido para vista, variando el tono del form y el body para que al momento de

visualizar sea un tono que no disguste visualizar, también aplicamos algunos cambios en las

letras para que sea más ameno, también aplicar sombras en el form y también en los botones para

enviar y limpiar datos dentro del formulario para que fuese más amigable para la visualización

por parte de un usuario.

También le dimos una medida para que el formulario este centrado y no se concentre en la

totalidad de la pantalla, algo más amigable por decir.

 Bibliografía

IACC (2015). Hojas de estilo CSS I. Programación HTML II. Semana 4.