Saltar la navegación

M3-CSS en documentos

CSS en documentos

CSS es un lenguaje que funciona en base a otros lenguajes de programación, pero realmente no es más que información para el navegador. Para entenderlo de manera simple, el texto HTML define la estructura del contenido de una página, mientras que el texto CSS define las características de dicho texto (negrita, color, fuente…), definiendo las reglas que el navegador seguirá en el momento de presentar la página web al usuario. Estas reglas están definidas por dos factores que interactúan mutuamente: el conjunto de propiedades y los selectores.

Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (en la sección <head>). Ejemplo:

Este método solo es utilizado cuando son pocos estilos o cuando se quieren incluir estilos específicos en una determinada página HTML.  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. Es por eso que, la forma más adecuada es utilizar un archivo que generalmente se le llama estilos.css.

CSS en un archivo externo

La W3C recomienda trabajar los estilos CSS en un archivo separado de los archivos HTML. El CSS y los HTML se enlazan mediante la etiqueta <link>. Para un proyecto de Sitio Web se pueden crear tantos archivos CSS sean necesarios. Cada una de las páginas HTML se pueden enlazar con estos archivos cuya extensión es .css. Un ejemplo de estilos CSS en un archivo externo:


Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a los contenidos de la página.

Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:

rel

Indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.

type

Indica el tipo de recurso enlazado. Sus valores están 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. De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio web.

De esta manera, el mantenimiento del sitio web se simplifica al máximo, puesto que un solo cambio en un archivo CSS permite variar de forma instantánea los estilos de todas las páginas HTML que enlazan ese archivo.

Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos, también se puede utilizar la etiqueta <style>.

Creado con eXeLearning (Ventana nueva)