Qué hace CSS

Un solo archivo CSS puede cambiar el estilo de todas las páginas de un sitio a la vez. Ese fue el argumento principal a favor de CSS cuando el W3C publicó CSS nivel 1 en diciembre de 1996.

La estructura en HTML, el aspecto en CSS

HTML dice qué es cada parte de una página: un encabezado, una lista, un formulario. CSS, siglas de Cascading Style Sheets (hojas de estilo en cascada), dice cómo deben verse esas partes: sus colores, fuentes, tamaños, espacios y posición en la pantalla. Mantener separadas las dos cosas tiene ventajas prácticas. Puedes cambiar el aspecto de todo un sitio editando una sola hoja de estilos; el mismo HTML puede verse distinto en un celular, en un monitor grande y en papel; y los lectores pueden aplicar sus propios estilos, como un texto más grande, sin romper la página.

Håkon Wium Lie empezó a trabajar en CSS en el CERN en octubre de 1994, Bert Bos se sumó al trabajo en 1995, y el W3C publicó CSS nivel 1 como Recomendación el 17 de diciembre de 1996. CSS 2 llegó en mayo de 1998. Desde entonces CSS se divide en módulos, como Color, Selectors, Flexbox y Grid, y cada uno avanza a su propio ritmo en el Grupo de Trabajo de CSS del W3C. No existe un CSS4 único; el grupo de trabajo publica una instantánea que indica qué módulos son estables.

La forma de una regla

Una hoja de estilos es una lista de reglas. Cada regla empieza con un selector, que dice a qué elementos se aplica, seguido de un bloque de declaraciones entre llaves. Dentro del bloque, cada declaración es una propiedad, dos puntos, un valor y un punto y coma. En la regla de arriba, h1 selecciona todos los encabezados de nivel uno, y las dos declaraciones hacen que esos encabezados sean azules y de 32 píxeles de alto. Los espacios y saltos de línea dentro de una regla no importan, así que la mayoría pone cada declaración en su propia línea para que se lea bien.

Cuando el navegador encuentra una declaración que no entiende, como una propiedad mal escrita o un valor sin sentido, salta esa declaración y sigue con la siguiente. Es a propósito: así se pueden agregar funciones nuevas de CSS sin romper los navegadores antiguos. La otra cara es que un solo punto y coma que falte puede tragarse sin aviso la declaración que sigue, porque las dos se juntan en una sola declaración no válida. Si un estilo no se aplica, revisa primero la puntuación. Los comentarios se escriben /* like this */.

Tres maneras de agregar CSS

<!-- 1. External stylesheet: one file for the whole site -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal stylesheet: rules for this page only -->
<style>
  p { line-height: 1.5; }
</style>

<!-- 3. Inline style: one element only -->
<p style="color: green;">Fresh today</p>

Una hoja de estilos externa, enlazada desde el <head> con <link rel="stylesheet">, es la opción habitual en un sitio real: todas las páginas la comparten, y el navegador la descarga una vez y la guarda en su caché. Un elemento <style> contiene reglas para una sola página, y es lo que usan los ejercicios de este curso. El atributo style aplica declaraciones a un solo elemento; sirve para una prueba rápida, pero es difícil de mantener, porque el mismo aspecto hay que repetirlo en cada elemento.

El navegador ya trae estilos

Incluso una página sin CSS tiene algo de estilo: los encabezados son grandes y en negrita, los enlaces son azules y subrayados, las listas tienen sangría. Esto viene de la hoja de estilos predeterminada del navegador, llamada hoja de estilos del agente de usuario. Tus reglas se aplican encima. Por eso la página de la panadería del curso de HTML se podía leer antes de tener CSS, y por eso una buena hoja de estilos cambia solo lo que necesita.