Hojas de estilo en cascada (CSS)

Hojas de estilo en cascada

El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>".

Ventajas

Algunas ventajas de utilizar CSS (u otro lenguaje de estilo) son:

• Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.

• Separación del contenido de la presentación, lo que facilita al creador, diseñador, usuario o dispositivo electrónico que muestre la página, la modificación de la visualización del documento sin alterar el contenido del mismo, sólo modificando algunos parámetros del CSS.

• Optimización del ancho de banda de la conexión, pues pueden definirse los mismos estilos para muchos elementos con un sólo selector; o porque un mismo archivo CSS puede servir para una multitud de documentos.

• Mejora en la accesibilidad del documento, pues con el uso del CSS se evitan antiguas prácticas necesarias para el control del diseño (como las tablas), y que iban en perjuicio de ciertos usos de los documentos, por parte de navegadores orientados a personas con algunas limitaciones sensoriales.

Navegador Motor CSS 1 CSS 2.1 CSS 3

Internet Explorer Trident Completo desde la versión 6.0 Completo desde la versión 8.0 Prácticamente nulo

Firefox Gecko Completo Casi completo Selectores, pseudo-clases y algunas propiedades

Safari WebKit Completo Casi completo Todos los selectores, pseudo-clases y muchas propiedades

Opera Presto Completo Casi completo Todos los selectores, pseudo-clases y muchas propiedades

Google Chrome WebKit Completo Casi completo Todos los selectores, pseudo-clases y muchas propiedades

Reglas

Selectores

Cualquier elemento HTML es un posible selector CSS1. El selector es simplemente el elemento que está conectado a un estilo particular. Por ejemplo, el selector en:

P { text-indent: 3em }

es P.

Selectores de clase

Un selector sencillo puede tener diferentes clases, permitiendo así al mismo elemento tener diferentes estilos. Por ejemplo, un autor puede querer mostrar el código en un color diferente dependiendo del idioma:

code.html { color: #191970 }

code.css { color: #4b0082 }

El ejemplo de arriba ha creado dos clases, css y html para usar con el elemento CODE de HTML. El atributo CLASS se usa en HTML para indicar la clase de un elemento, por ejemplo,

<P CLASS=advertencia>Solo se permite una clase por selector.

Por ejemplo, code.html.proprietario no es válida.</p>

Las clases también pueden ser declaradas sin elementos asociados:

.nota { font-size: small }

En este caso, la clase nota puede usarse con cualquier elemento.

Una buena práctica es llamar a las clases de acuerdo a su función y no por su apariencia. La clase nota del ejemplo de arriba pudo haber sido llamada pequeña (small), pero este nombre perdería todo significado si el autor decidiera cambiar el estilo de la clase de tal modo que ya no tuviera una fuente pequeña.

Selectores ID

Los selectores ID son asignados individualmente con el propósito de una definición en términos 'por elemento'. Este tipo de selector debería ser usado con moderación debido a sus inherentes limitaciones. Un selector ID se asigna mediante el uso del indicador "#" para preceder un nombre. Por ejemplo, un selector ID podría asignarse así:

#svp94O { text-indent: 3em }

Esto sería referenciado en HTML por el atributo ID:

<P ID=svp94O>Texto con sangría 3em</P>

Selectores de contexto

Los selectores de contexto son simples cadenas de dos o más selectores simples separados por espacio en blanco. A estos selectores se les pueden asignar propiedades normales y, debido a las reglas del orden de cascada, tendrán precedencia sobre selectores simples. Por ejemplo, el selector de contexto en:

P EM { background: yellow }

es P EM. Esta regla dice que el texto con énfasis dentro del párrafo debería tener un fondo amarillo; el texto con

...