Dándole Estilo a nuestra página

Enhorabuena si es que hemos llegado a este punto quiere decir que estamos entendiendo el curso y me alegro mucho espero sus comentarios, recomendaciones y dudas en el FORO solo eso les pido a cambio de este trabajo.

Ahora bien pongamos en uso nuestra hoja de estilos, y la manera de hacerlo es asignándoles nombres o a una tabla o a un div o hasta a un párrafo, el DiV siempre es el mas global y mas fácil de manejar y como ya lo pusimos lo usaremos.

La manera de asignarlo el nombre a un Div es con el código class=”el nombre”, esto lo ponemos en nuestra  etiqueta Div de la siguiente manera:

 

Clase cuerpo es el nombre que le asignamos al div, una vez echo esto abrimos nuestra hoja de estilos, recuerden que sus archivos los pueden abrir desde la paleta archivos a su derecha.

En nuestra hoja de estilos aún no hemos puesto nada asi que esta será nuestra primera línea, primero vamos a llamar o invocar a nuestro clase cuerpo con el siguiente código:

.cuerpo { }

Cuando nosotros asignamos a una etiqueta, llamese div, td(tabla), p(parrafo) o lo que sea, para poder darle sus características en la hoja de estilos tenemos que poner primero un punto (.) seguido del nombre de la clase, en nuestro caso “cuerpo”  y luego todas las instrucciones irán dentro de corchetes ({ }). Entendido esto vamos a definir las características.

Entre los corchetes colocamos:

text-align:center;

El text-align: nos permite darle al contenido del div el efecto de centrado(center), de alineado a la izquierda(left), de alineado a la derecha(right) y de justificado(justify), en nuestro caso lo queremos dejar centrado. Si lo han puesto bien el código en su hoja de estilos debe ser:

 

OjO.! Para que surga efecto en tu index.html los cambios en tu hoja de estilos deben estar guardados.!

Ahora guardamos nuestra hoja de estilos Archivo > Guardar

Vamos a nuestro index y podemos ver en la pestaña Diseño que todo se ah centrado incluyendo la imagen, interesante verda?

 

Pero axel axel puedo ponerle yo alineado a la izquierda?

Claro que puedes y seria una gran idea que vayan probando, pero para motivo de la buena compreción del curso lo dejan en centrado al final. Si le dan a F12 pueden ver que también aparece centrado en el navegador, fácil no?

Ahora para darle el sarpaso final vamos a cambiarle el Tipo, Color y Tamaño de la letra desde nuestra hoja de estilos… Asustado? No? Pos io si jeje

En nuestra hoja de estilos debajo de text-align:center; ponemos:

 

Pero Axel!! que $%#¬" es eso!

 

Les explico ¬¬

 

Font-family nos dira que tipo de letra ira dentro del div, yo le puse Tahoma, Verdana, "Trebuchet MS" porque me parece una letra adecuada para una web, Font-size nos indica el tamaño de la letra dentro de nuestro div de clase cuerpo, el 14 pueden modificarlo a su gusto pero siempre poniendo px(pixel) al final; y por ultimo el color: que  aunque ustedes no lo crean nos señala el color de la letra jeje el #003399 es el código equivalente a un azul oscuro, pueden revisar AQUÍ la paleta de colores para que elijan el que mas les guste.

Ahora solo queda guardar los cambios de la hoja de estilos e ir a nuestro index y ver la vista previa. Les debería quedar ASI.

 

<<<<< Anterior Siguiente >>>>>