Tu primer CSS: la página cobra color

Te lo muestro: qué es CSS

HTML es el esqueleto de la página. CSS es su ropa: colores, fuentes, tamaños, espaciado. Se escribe en un archivo aparte y se ve así:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Léelo en voz alta así: «Cada título h1, píntalo azul oscuro. Cada párrafo p, hazlo de 18 píxeles y gris oscuro.»

Cada regla tiene tres partes:

un selector (h1) – a qué se aplica la regla,
una propiedad (color) – qué estamos cambiando,
un valor (darkblue) – a qué lo estamos cambiando.

Dos puntos separan la propiedad y el valor, y cada línea termina con punto y coma. Cuidado con esos puntos y coma – olvidar uno es el error más común de CSS del mundo.

Conectarlo: dile a tu página dónde está tu CSS

Dentro de tu carpeta my-website, crea un archivo nuevo llamado style.css.
Añade esta línea dentro del <head> de cada una de tus páginas HTML:
```
<link rel="stylesheet" href="style.css">
```
Esto dice: «Encontrarás el aspecto de esta página en el archivo style.css.»
Comprueba que funciona – pon algo imposible de no ver en style.css:
```
body {
  background-color: yellow;
}
```
Guárdalo, actualiza la página. ¿Todo amarillo? ¡Funciona! (Puedes borrar el amarillo ya.)

Colores en CSS

Puedes escribir colores como palabras en inglés (red, darkblue, lightgray, tomato, gold…) o con más precisión como un código que empieza con almohadilla: #1d4ed8 es azul, #16a34a es verde. Mezcla el color que quieras en htmlcolorcodes.com.

Ahora tú 💪

Viste tu sitio web con sus primeros colores. En style.css, define:

el color de fondo de toda la página (body),
el color de tus títulos (h1, h2),
el tamaño y color de tus párrafos (p).

Soluciones – claro, puedes cambiar los colores:

🏫 Sitio web del colegio – solución

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

El azul encaja bien con un sitio web de colegio – transmite confianza (¡por eso los bancos también lo usan!).

🙋 Sitio web personal – solución

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

Un sitio web personal puede ser más atrevido – el naranja cálido dice «este sitio está vivo».

🌍 Diario de viajes – solución

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Verde como bosques y prados – perfecto para un diario de viajes.

⚽ Sitio web del club – solución

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Lo mejor es usar los colores de tu club – ¿juegas de rojo? ¡Pues rojo!

⚠️

Regla de legibilidad: texto oscuro sobre fondo claro (o al revés). Amarillo claro sobre blanco no se lee. Cuando no estés seguro, pregúntale a alguien: «¿Puedes leer esto cómodamente?»

✅

Compruébalo tú: Tu sitio web tiene sus propios colores – y como tu CSS vive en un archivo enlazado a cada página, todas se colorearon a la vez. Bastante listo, ¿no?

Lo que te llevas de esta lección

CSS = el aspecto. Se escribe en un archivo style.css, conectado con una etiqueta <link> en <head>.
La regla: selector { propiedad: valor; } – y no olvides los puntos y coma.
Un archivo CSS viste todo tu sitio web de una vez.