7.1. Generalidades

Antes de entrar de lleno en la descripción de su sintaxis, es preciso exponer algunos aspectos introductorios del lenguaje:

7.1.1. Versiones

CSS es una tecnología cuyo estándar es propuesto por el W3C. Presenta, más que versiones, niveles, porque el siguiente se va construyendo sobre el anterior.

CSS1

Se publicó a finales de 1995 e incluía aspectos básicos: propiedades de la tipografía, colores, alineaciones, propiedades de las cajas como bordes o márgenes, presentación de listas, etc.

CSS2

Se publicó en 1998 y añadió posicionamiento, estilos según el medio y algunas cosas más.

La especificación contenía algunos problemas de funcionalidad por lo que en 2011 se publicó la revisión CSS2.1, que los corregía y añadía alguna funcionalidad más.

CSS3

Se publicó a partir de 2011 y, aunque añadió bastantes funcionalidades, su principal aportación fue modularizar las especificaciones de CSS para que cada uno de sus módulos pueda ir evolucionando de forma independiente. Por ejemplo, un módulo es «Fondos y colores» y sólo se encarga de las reglas referentes a este aspecto, mientras que hay otro específico para describir «Selectores».

Al segregarse, cada módulo avanza a su ritmo y algunos pueden encontrarse en nivel 3, otros en nivel 4 y otros próximos a alcanzar el nivel 5. Por tanto, ya no existirá jamás una especificación CSS de nivel 4.

7.1.2. Asociación al HTML

Dado que las reglas CSS se aplican a un documento HTML, es necesario establecer la asociación entre las unas y el otro. Hay tres estrategias que, de menor a mayor conveniencia, son:

  1. Reglas en línea, esto es, aplicar directamente el estilo mediante el atributo style:

    <p style="color: gray">Esto es un párrafo</p>

  2. Reglas internas, esto es, incluir reglas CSS dentro del elemento style de la cabecera:

    <!DOCTYPE html>
<html lang="es">
   <head>
      <title>Ejemplo de cómo usar style</title>
      <meta charset="utf-8">
      <style>
         p {
            color: red;
         }
      </style>
   </head>

   <body>
      <!-- ... El contenido de la página ... -->
   </body>
</html>

    Nota

    Las dos reglas no son exactamente equivalentes. La primera se aplica sólo al elemento párrafo que contiene el atributo, mientras que la segunda se aplicará a todos los elementos párrafo del documento. Ya profundizaremos más adelante en los selectores.

  3. Reglas externas, esto es, escribir las reglas en uno o varios documentos aparte y referirlos dentro del HTML usando el elemento link de la cabecera:

    <!DOCTYPE html>
<html lang="es">
   <head>
      <title>Ejemplo de cómo usar style</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="ruta/a/archivo.css">
   </head>

   <body>
      <!-- ... El contenido de la página ... -->
   </body>
</html>

En principio y salvo excepciones muy, muy puntuales, el método aconsejable para llevar a cabo la asociación es el tercero, ya que es el que separa realmente la presentación del contenido. De este modo, cambiar el aspecto del documento consiste únicamente en cambiar la referencia al archivo (o los archivos) CSS, acción que puede llevarse a cabo incluso de forma dinámica con Javascript, como ya veremos.

Recuérdese, además, que pueden definirse estilos alternativos dotándolos de un nombre, tal como se indicó al estudiar el elemento <link>.

7.1.3. Herramientas

Como herramientas para la creación, prueba y validación de documentos CSS es válido lo expuesto en el apartado respectivo para HTML.