Hojas de estilo

Hojas de estilo

La técnica más básica de incorporar estilos CSS a un documento HTML es asignar los estilos dentro de las etiquetas mediante el atributo style.

Como ejemplo, en un HTML que contiene el elemento <p> vamos a modificarlo con el atributo style, incluyéndole los valores “font-size: 15px” y “color: #3333”. Estos estilos cambiarán el tamaño por defecto del texto y su color, dentro del elemento <p> a un nuevo tamaño de 15 píxeles y un color gris.

<p style=”font-size:15px; color:#3333333;”></p>

Esta técnica, sirve para probar estilos de manera rápida, y comprobar su funcionalidad, pero no es recomendable su uso en el documento final.

Esto nos supondría escribir y repetir cada estilo en cada uno de los elementos a modificar, incrementando el tamaño del documento y dificultando la labor de mantenimiento y actualización de la web.

A la hora de incluir contenido o modificaciones en nuestras etiquetas emplearemos las hojas en cascada o CSS, que incluiremos en cada página mediante una referencia, utilizando la línea  <link rel=”stylesheet” href=”style.css”>

De esta forma, le diremos al navegador que cargue el archivo style.css, que contendrá todos los estilos necesitados para mostrar el documento en pantalla.

La etiqueta <link>referenciando el archivo CSS será insertada en cada uno de los documentos que requieren de esos estilos.