¿Qué es CSS?
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.
¿Cómo se utiliza?
Por ejemplo, el elemento de HTML <h1> indica que un
bloque de texto es un encabezamiento y que es más importante que un bloque
etiquetado como <h2>. Versiones más antiguas de HTML permitían atributos
extra dentro de la etiqueta abierta para darle formato (como el color o el
tamaño de fuente).
No obstante, cada etiqueta <h1> debía disponer de la información si se
deseaba un diseño consistente para una página y, además, una persona que leía
esa página con un navegador
perdía totalmente el control sobre la visualización del texto.
Cuando se utiliza CSS, la etiqueta <h1> no debería
proporcionar información sobre cómo será visualizado, solamente marca la
estructura del documento. La información de estilo, separada en una hoja de
estilo, especifica cómo se ha de mostrar <h1>: color, fuente, alineación
del texto, tamaño y otras características no visuales, como definir el volumen
de un sintetizador
de voz, por ejemplo.
Por otro lado, antes de que estuviera disponible CSS, la
única forma de componer espacialmente una página era el uso de tablas
<table>. Aunque esta era una técnica cómoda y versátil, ello conllevaba
el uso de un elemento con una semántica particular, y en el que la distribución
de los datos no se ajustaban al flujo de la información que se obtenía en la
vista desde los navegadores habituales, lo que redundaba en una merma en la
accesibilidad a la página por parte de otros navegadores (orientados a personas
con alguna dedificiencia sensorial, o a ciertos dispositivos electrónicos).
Mediante el uso de CSS, se ha permitido eliminar el uso
de tablas para el diseño, usándolas sólamente para la muestra de datos
tabulados, si bien es cierto que obtener la versatilidad que ofrecía el diseño
con tablas, es algo más complicado si no se usan.
¿Qué sintaxis tiene?
CSS tiene una sintaxis muy sencilla, que
usa unas cuantas palabras claves tomadas del inglés para especificar los
nombres de sus selectores, propiedades y atributos.
Una hoja de estilos CSS consiste en una serie de reglas.
Cada regla consiste en uno o más selectores y un bloque de estilos
con los estilos a aplicar para los elementos del documento que cumplan con el
selector que les precede. Cada bloque de estilos se define entre llaves, y está
formado por una o varias declaraciones de estilo con el formato
propiedad:valor;
En el CSS, los selectors marcarán qué elementos se
verán afectados por cada bloque de estilo que les siga, pudiendo afectar a uno
o varios elementos a la vez, en función de su tipo, nombre (name), ID, clase
(class), posición dentro del Document
Object Model, etcétera.
ejemplo:
selector [, selector2, ...] [:pseudo-class] {
propiedad: valor;
[propiedad2: valor2;
...]
}
/* comentarios */
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.
Ejemplos con uso:
Ejemplos sin uso:
