Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada. En esta tercera parte del vídeo “CSS: cómo se usa en HTML” te voy a explicar cómo se usa la etiqueta para definir los estilos de una página web.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es
y a través de mi cuenta en Twitter @sergiolujanmora.

En el vídeo anterior vimos el uso del atributo style y de la etiqueta para definir los estilos de los elementos de una página web. En este vídeo vamos a ver el uso de la etiqueta . Al usar la etiqueta reducimos el acoplamiento que existe entre HTML y CSS al máximo, ya que el código HTML y CSS no se encuentran en el mismo fichero, sino que los almacenamos en ficheros distintos.

Además, al estar el código CSS en un fichero separado, podemos hacer que diferentes páginas web, diferentes ficheros HTML, utilicen el mismo fichero CSS. La etiqueta la debemos escribir en el de la página web. En las versiones antiguas de HTML era necesario incluir el atributo type en la etiqueta para indicar el tipo de lenguaje de estilos que se usaba. La idea era permitir el uso de distintos lenguajes de estilo, pero al final sólo quedó uno, CSS.

Por ello, en HTML5 se ha simplificado y podemos escribir la etiqueta sin el atributo type, ya que tiene definido como valor por defecto CSS. Además, la etiqueta debe llevar el atributo href=“” en el que se indica la ruta al fichero que contiene la hoja de estilo y el atributo rel=“stylesheet” que indica que es una hoja de estilo. La etiqueta también puede incluir otros atributos, como media o title, pero no los vamos a ver en este vídeo.

A continuación te voy a mostrar cómo utilizar esta etiqueta, pero antes vamos a ver las propiedades de CSS que voy a utilizar. Voy a utilizar: color para definir el color del texto, background-color para definir el color de fondo del texto, font-family para definir el tipo de letra, la fuente, y font-size para definir el tamaño del texto.

Partimos del ejemplo que hicimos en el vídeo anterior, en el que explicaba el uso de la etiqueta . En ese ejemplo, teníamos esta página web sencilla, y en el código HTML añadíamos la etiqueta para incluir la hoja de estilo en cascada, las propiedades para definir la presentación visual.

Lo que vamos a hacer en este vídeo es transformar esto en un fichero externo, vamos a almacenar la hoja de estilo en un fichero aparte. Así que, primero lo que hago es cortar este código, creo un fichero nuevo y pego el código CSS. En el fichero CSS que vamos a almacenar de forma separada no necesito la etiqueta , porque este fichero CSS va a ser exclusivo de CSS.

Lo almaceno en el mismo directorio donde tengo almacenado el código HTML y, por ejemplo, lo voy a llamar “miestilo.css”. Fijaros como al almacenarlo con la extensión .css el editor Notepad++ me detecta la sintaxis del lenguaje y me lo colorea. Ahora vuelvo al fichero HTML y donde antes tenía la etiqueta añado la etiqueta .

Primero le pongo el atributo href, y pongo la ruta de acceso al fichero CSS. Como está en el mismo directorio, no hace falta que ponga una ruta, simplemente pongo el nombre del fichero “miestilo.css”. A continuación voy a poner el atributo rel=“stylesheet” y el atributo type que he indicado en el vídeo que si estamos trabajando en HTML5, como es en este ejemplo, no hace falta que lo pongamos, pero lo podemos poner si queremos, “text/css”, y cierro la etiqueta.

Lo guardo, y ahora mismo tengo dos ficheros, el fichero HTML y el fichero CSS. Con esta estrategia logro reducir el acoplamiento al máximo. Por supuesto, no podemos hacer que haya un total desacoplamiento, tiene que haber algún punto de conexión entre el código HTML y el código CSS y ese punto de conexión lo hemos reducido a la mínima expresión, a esta etiqueta .

Vamos a probar esta página, me voy al menú “Ejecutar”, “Launch in Chrome”. Y vemos que efectivamente, aparece la página web con los estilos que habíamos definido previamente. Para convencernos de que realmente se está cargando esta hoja de estilos, vamos a hacer un cambio, por ejemplo, voy a cambiar el color de fondo y lo voy a poner a rojo, “#F00”.

Almaceno el fichero CSS, me vuelvo al navegador y recargo la página, y efectivamente, ha cambiado el color al rojo. Por tanto, sí que esta página HTML está interpretando correctamente esta etiqueta , y está cargando el CSS que tenemos en un fichero aparte.

Ahora yo podría hacer 5, 10, 50 o 1000 páginas y todas podrían usar el mismo CSS, lo único que tendría que hacer es en cada una de mis páginas poner la etiqueta que cargue el mismo fichero CSS. Y si quiero hacer un cambio en todas las páginas de mi sitio web, lo único que tengo que hacer es cambiar, introducir ese cambio en este fichero, en un único fichero.

Y con esto termina la tercera parte de este vídeo. En estos tres vídeos hemos visto las tres formas que existen de usar un CSS en HTML y hemos visto que la mejor forma es utilizar la etiqueta . Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.