TAREA 12

HOJAS DE ESTILO CSS. CONCEPTOS BÁSICOS

CSS son las siglas de Cascade Style Sheet, que traducido, significa hojas de estilo en cascada.

Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web. En un principio, los sitios web se concentraban más en su contenido que en su presentación.

HTML no pone atención en la apariencia del documento, sino en la estructura. CSS describe como los elementos dispuestos en la página son presentados al usuario. CSS es un gran avance que complementa el HTML y la Web en general.

Con CSS podemos especificar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imágenes en la página.

En las primeras versiones de HTML se comenzaron a introducir elementos con la finalidad de mejorar la "presentación" del "contenido" de la página. Así aparecieron elementos para definir las fuentes, tamaños, colores, alineamiento de textos y bloques, etc.

Luego se creo la tecnología CSS (Cascade Style Sheet),  que separa el "contenido" de la "presentación". Con esto quedó perfectamente definido el objetivo de HTML (disponemos contenido) y CSS (definimos la presentación de ese contenido).

Color de frente y fondo a un elemento HTML mediante CSS.

La propiedad que debemos inicializar se llama style y la tienen todos los elementos HTML. En este primer ejemplo que vamos a ver, inicializamos las propiedades color (define el color del texto) y background-color (define el color de fondo del texto).

Cada vez que inicializamos una propiedad, debemos separarla de la siguiente por punto y coma.

Para definir un color, lo debemos hacer indicando la candidad de rojo,verde y azul (color:#0000ff). Los dos primeros números indican la cantidad de rojo (en este caso 00), luego la cantidad de verde (en este caso 00) y por último la cantidad de azul (en este caso ff). Como podemos observar, el valor viene indicado en formato hexadecimal.

Hasta ahora, siempre que disponíamos un título aparecía de color negro. El negro, es el estilo por defecto que tiene definido todos los elementos de títulos, si queremos variar dicho valor, debemos hacerlo mediante CSS.

Las hojas de estilo si son sensibles a mayúsculas y minúsculas, por lo que "color" no es lo mismo que definir "COLOR".

Las propiedades que definimos dentro de style, deben ir separadas por punto y coma.

Ejercicio 1

Confecciona una página que contenga una noticia (busca alguna en algún periódico) con el  título de nivel 1 de color azul (#0000ff) y un párrafo de color gris oscuro (#888888) y fondo amarillo claro (#ffffdd). 

ELEMENTOS HTML <DIV> Y <SPAN>

Estas marcas se utilizan en conjunción con las hojas de estilo. La diferencia entre estas dos etiquetas, es que cuando utilizamos el elemento <div>, produce un salto de línea previo y uno al final, es decir, es una marca de bloque como lo son h1,h2,p etc. En cambio, la etiqueta <span> no produce un salto de línea porque se trata de un elemento en línea. 

Veamos un ejemplo:

El resutado sería:

Ejercicio 2

Crea el texto del ejemplo .