Índice

CSS externas al documento HTML5

Del mismo modo, es posible agrupar las declaraciones de estilo en un archivo externo (diferente) al archivo HTML.

Este modo de proceder respeta mejor el principio de separación entre contenido y presentación. 

Una de las ventajas de este tipo de hojas de estilo externas al documento es que es posible crear una hoja de estilo que se aplica no solo a una única página HTML,sino a un conjunto de páginas en un sitio o en una aplicación.

Esta técnica emplea dos archivos:

  • Un archivo que contiene la declaración de estilo. Este archivo tiene la extensión .css.

  • Un documento HTML que contiene un enlace hacia el archivo CSS así creado.

La hoja de estilo externa

h1 {text-decoration: overline;}

Destacamos:

  • Que este archivo de texto puede crearse, por ejemplo, con el Bloc de Notas de Windows. 

  • Que únicamente contiene declaraciones de estilo.

  • Que, por consiguiente, no puede contener etiquetas HTML y en particular las etiquetas <style type="text/css"> ... </style>, que se usan para definir las hojas de estilo internas.

  • Es preciso guardar este archivo con un nombre cualquiera seguido de la extensión .css. En nuestro caso, ejemplo.css.

  • Por simplicidad, este archivo se situará en la misma carpeta que el documento HTML (direccionamiento relativo o local).

El documento HTML5

Se agregará en el encabezado, entre las etiquetas <head> y </head>, un enlace hacia la hoja de estilo en cuestión.

<link rel="stylesheet" ...