CSS es un lenguaje creado para definir la apariencia de los documentos escritos en un lenguaje de marcado, como sería el caso del HTML o el XML. Por tanto, este lenguaje permite cambiar el aspecto de los elementos HTML, ya sea su color, su forma, su posición o cualquier otra característica de índole visual.
Este lenguaje es desarrollado y mantenido por el W3C (Consorcio WWW), por lo que cumple con las especificaciones de estandarización necesarias para ser compatible con los navegadores web. Las siglas CSS son un acrónimo inglés de Cascading Style Sheets (hojas de estilo en cascada).
Historia del CSS
El origen del CSS es compartido. Entre finales de 1994 y 1995, Håkon Wium Lie y Bert Bos unieron sus propuestas, CHSS y SPP respectivamente, para crear un lenguaje con lo mejor de cada una: lo llamaron CSS. En 1995, el W3C apostó por el desarrollo de CSS, lo añadió a su grupo de trabajo de HTML y en 1996 publicó la primera recomendación oficial (CSS1).
Desde entonces, se han creado versiones nuevas (CSS2 y CSS3). Cada versión se construye sobre la anterior, añadiendo funciones nuevas respecto al nivel previo. Así se garantiza la compatibilidad entre versiones. Por esta razón también se conocen como CSS nivel 1, CSS nivel 2 y CSS nivel 3.
Soporte en los navegadores
Actualmente existen muchos navegadores web cuya diferencia principal es el motor que usan para interpretar el código HTML y CSS. Debido a esta diferencia no renderizan las páginas web de la misma manera. Esto significa que pueden tener limitaciones en ciertas características recientes del CSS.
Además de tener motores diferentes, cada navegador web tiene distintas versiones. Cada nueva versión puede incluir soporte ampliado del CSS. En este aspecto, para un diseñador o desarrollador web, la versión del navegador puede ser tan importante como el tipo de motor que tiene implementado.
Un buen desarrollador web debe intentar que su diseño sea compatible con la mayoría de los navegadores web más usados. No tendría sentido hacer una web que funciona en el 50% de los navegadores, porque la otra mitad de la población tendría una mala experiencia visitando el sitio web.
Los navegadores web más importantes son Firefox, Chrome, Safari, Opera, Edge e Internet Explorer, pero hay muchos más. Estos son los más avanzados en el soporte de CSS debido a que tienen un soporte casi perfecto de la versión 2.1 de CSS y tienen soporte para muchos elementos de la versión CSS3.
Tabla de motores de renderizado HTML:
| Motor | Navegadores |
|---|---|
| Gecko | Firefox |
| KHTML | Konqueror |
| WebKit | Safari, Epiphany |
| Blink | Chromium, Chrome, Opera, Edge |
| Trident | Internet Explorer |
Para comprobar la compatibilidad de una propiedad CSS o de un elemento HTML se puede usar la herramienta CanIUse. A través de esta herramienta también se puede saber el porcentaje de usuarios que usan un navegador y, por tanto, la cobertura de compatibilidad que tiene el elemento consultado.
Niveles de CSS
El W3C (Consorcio WWW) es una comunidad internacional que desarrolla las especificaciones o normas oficiales del lenguaje CSS. Su objetivo es asegurar el crecimiento y mejora de forma neutral de este lenguaje, así lo independiza de tecnologías propietarias y le añade características de interés.
Como ya se ha dicho, cada nueva versión de CSS se construye sobre la anterior, razón por la cual las versiones son conocidas como niveles de CSS. El nivel que se utiliza actualmente en el mundo del desarrollo web es el 2.1: tiene soporte completo en los navegadores web más populares.
| Nivel | Año | Descripción |
|---|---|---|
| CSS1 | 1996 | Fuentes, colores, alineación… |
| CSS2 | 1998 | Posicionamiento, tipos de medios, etc… |
| CSS2.1 | 2005 | Corrige errores de CSS2. |
| CSS3 | 2011 | Nuevas funciones en módulos separados. |
El W3C lleva años trabajando en la versión CSS3, que tiene como novedad la separación de las nuevas funcionalidades en pequeños módulos para facilitar su implementación en los navegadores web. Esta versión aporta muchos cambios relevantes para todos los niveles de CSS.
Funcionamiento básico del lenguaje CSS
CSS es un lenguaje de hojas de estilos en cascada. Esto quiere decir que permite aplicar estilos a varios elementos HTML y en múltiples documentos de forma masiva. Antes de que el CSS se popularizase, los estilos se aplicaban uno por uno sobre los elementos HTML mediante el uso de atributos.
¿Te imaginas tener 100.000 documentos HTML, cada uno con cinco párrafos, y tener que cambiar el color de cada uno de ellos? Antes de la llegada del CSS, un diseñador web habría tenido que realizar 500.000 modificaciones, seguramente usando algún programa de sustitución de texto; era engorroso.
La gran ventaja del lenguaje CSS es que permite separar el contenido del diseño. Hay varias formas de vincular un diseño CSS a un documento. La más recomendada es utilizando el elemento <link> dentro del <head> del documento. Así, todos los documentos de un sitio web llevarán incrustado el mismo diseño, y se pueden modificar los estilos de forma automática.
Ejemplo de código HTML incluyendo un fichero CSS:
<head>
<link rel='stylesheet' href='estilos.css'>
</head>
Si ahora, por ejemplo, se quiere indicar que los encabezados (elemento <h1>) deben estar representados de color rojo y los párrafos (elemento <p>) de color azul, en el archivo estilos.css se introducirá el siguiente código:
h1 {
color: blue;
}
p {
color: red;
}
Definir así la apariencia de los elementos HTML ahorra mucho trabajo a los diseñadores web, y evita la edición masiva de documentos HTML. Con los «selectores» se puede apuntar a cualquier elemento y aplicarle estilos mediante propiedades. La sintaxis del CSS es fácil de aprender.
selector {
propiedad: valor;
}
CSS tiene varios tipos de selectores: los genéricos, que corresponden al nombre de la etiqueta HTML; los identificadores, mediante el atributo id; y las clases, a través del atributo class. Existen también selectores avanzados, pseudoclases y pseudoelementos que son de gran utilidad.
En CSS es importante dominar el uso de selectores. Sin embargo, existen otros dos conceptos que también conviene comprender para hacer un uso correcto del lenguaje CSS: se trata de la herencia y la cascada, dos conceptos que a pesar de ser diferentes, están estrechamente relacionados.
La herencia tiene que ver en cómo los elementos HTML anidados (hijos) heredan algunas propiedades de sus elementos contenedores (padres). En cambio, la cascada es el algoritmo que controla el resultado final cuando se aplican declaraciones CSS contradictorias sobre el mismo elemento HTML.
