Loading...

Cómo incluir CSS en un documento XHTML



Introducción a CSS
Javier Eguíluz Pérez
1.6. Cómo incluir CSS en un documento XHTML
Una de las principales características de CSS es su flexibilidad y las diferentes
opciones que ofrece para realizar una misma tarea. De hecho, existen tres
opciones para incluir CSS en un documento HTML.
1.6.1. Incluir CSS en el mismo documento HTML
Los estilos se definen en una zona específica del propio documento HTML. Se
emplea la etiqueta Un párrafo de texto. Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio Web. El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar. 1.6.2. Definir CSS en un archivo externo En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta . Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite. Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes pasos: 1) Se crea un archivo de texto y se le añade solamente el siguiente contenido: p { color: black; font-family: Verdana; } 2) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atencion a que el archivo tenga extension .css y no .txt 3) En la pagina HTML se enlaza el archivo CSS externo mediante la etiqueta : Ejemplo de estilos CSS en un archivo externo Un parrafo de texto. Cuando el navegador carga la pagina HTML anterior, antes de mostrar sus contenidos tambien descarga los archivos CSS externos enlazados mediante la etiqueta y aplica los estilos a los contenidos de la pagina. Normalmente, la etiqueta incluye cuatro atributos cuando se enlaza un archivo CSS: . rel: indica el tipo de relacion que tiene el recurso enlazado (en este caso, el archivo CSS) y la pagina HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet . type: indica el tipo de recurso enlazado. Sus valores estan estandarizados y para los archivos CSS su valor siempre es text/css . href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio Web. . media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Mas adelante se explican en detalle los medios CSS y su funcionamiento. De todas las formas de incluir CSS en las paginas HTML, esta es la mas utilizada con mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de paginas HTML, por lo que se garantiza la aplicación homogénea de los mismos estilos a todas las paginas que forman un sitio Web. Con este método, el mantenimiento del sitio Web se simplifica al máximo, ya que un solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas las paginas HTML que enlazan ese archivo. Aunque generalmente se emplea la etiqueta para enlazar los archivos CSS externos, también se puede utilizar la etiqueta Un párrafo de texto. En este caso, para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una regla especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier otra regla CSS (con la única excepción de la regla @charset). La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las siguientes reglas @import son equivalentes: @import '/css/estilos.css'; @import "/css/estilos.css"; @import url('/css/estilos.css'); @import url("/css/estilos.css"); Fuente: Introducción a CSS Javier Eguíluz Pérez