¿Qué es CSS?

CSS (Cascading Style Sheets, hojas de estilo en cascada) es el lenguaje que decide cómo se ve una página web: colores, tipos de letra, tamaños, espacios, bordes y dónde se coloca cada cosa. HTML dice qué hay en la página; CSS dice cómo se muestra.

Antes de CSS

En los años 90, el aspecto se escribía mezclado con el contenido, dentro del propio HTML:

<h1><font color="red" face="Arial" size="5">Titular</font></h1>
<p><font color="gray" face="Verdana" size="2">Un párrafo.</font></p>

Si querías cambiar el color de todos los títulos de una web de cien páginas, tenías que editar cien archivos. Con CSS, el mismo resultado se escribe una sola vez:

h1 { color: red; font-family: Arial, sans-serif; }
p  { color: gray; font-family: Verdana, sans-serif; }

Por qué separar contenido y diseño

• Mantenimiento. Cambias el diseño de toda la web tocando un solo archivo.
• HTML más limpio y con significado. El HTML describe qué es cada cosa; el CSS decide cómo se ve.
• Accesibilidad. Los lectores de pantalla y los buscadores trabajan con el HTML, sin distraerse con el diseño.
• Adaptación a cada dispositivo. El mismo HTML puede verse de una forma en el móvil, de otra en el ordenador y de otra al imprimir.

Las partes de una regla

CSS se escribe en reglas. Cada regla tiene esta forma:

h1 {
  color: blue;
  font-size: 32px;
}

Parte	En el ejemplo	Qué es
Selector	h1	A qué elementos se aplica la regla
Declaración	color: blue;	Un cambio concreto
Propiedad	color	Qué característica cambias
Valor	blue	Qué valor le das
Bloque de declaraciones	todo lo que va entre { }	El conjunto de cambios

• Propiedad y valor se separan con dos puntos.
• Cada declaración termina en punto y coma. En la última no es obligatorio, pero ponlo siempre: si luego añades otra línea, te ahorras un error.
• Una hoja de estilos no es más que una lista de reglas.

En algunos libros y apuntes verás que a las propiedades se les llama “atributos”. En la documentación oficial se llaman propiedades, y así las llamaremos aquí para no confundirlas con los atributos de HTML.

CSS tiene cientos de propiedades, pero con unas treinta harás el 90 % del trabajo. Las irás viendo a lo largo del curso.

Dónde se escribe el CSS

Hay tres formas de añadir CSS a una página:

1. En un archivo aparte (hoja de estilos externa). La recomendada. Creas estilos.css y lo enlazas dentro del <head>:

<link rel="stylesheet" href="css/estilos.css">

2. En una etiqueta <style> dentro del <head>. Útil para pruebas rápidas y ejemplos, como en el editor de esta página:

<style>
  body { background-color: #f5f5f5; }
</style>

(En código antiguo verás <style type="text/css">. En HTML5 el type sobra.)

3. En el atributo style de una etiqueta:

<p style="color: red;">Texto rojo</p>

Evítalo salvo casos muy concretos: mezcla contenido y diseño, no se puede reutilizar y tiene tanta prioridad que luego cuesta sobrescribirlo.

El archivo aparte es la mejor opción porque un mismo estilos.css sirve para todas las páginas de tu web, y el navegador lo guarda en caché: se descarga una vez y se reutiliza en cada página.

Comentarios en CSS

/* Esto es un comentario en CSS */
/* Puede ocupar
   varias líneas */

En CSS no existe el comentario de una línea con //.

¿Por qué “en cascada”?

Porque a un mismo elemento le pueden llegar varias reglas a la vez (del navegador, de tu hoja de estilos, de una librería…). CSS tiene un sistema para decidir cuál gana en cada caso. Lo verás en detalle en la lección de cascada, especificidad y herencia.

Tu mejor herramienta: el inspector

Pulsa F12 (o clic derecho → Inspeccionar) en cualquier web. En la pestaña Elementos verás el HTML, y a la derecha todas las reglas CSS que se aplican al elemento seleccionado. Puedes cambiar valores en directo y ver el resultado al momento. Es la forma más rápida de aprender CSS y de descubrir por qué algo no se ve como esperas.