css:
lo que dice
cómo se ve

una lista de decisiones visuales

CSS son las siglas de Cascading Style Sheets: hojas de estilo en cascada. Tampoco es un lenguaje de programación. Es una lista de decisiones: los párrafos así de grandes, el fondo de este color, el menú en fila.

La palabra importante es cascada: las reglas se leen de arriba abajo y las de abajo pisan a las de arriba. Por eso el orden dentro del archivo importa, y por eso la media query del móvil va siempre al final.

cómo se enchufa

Una sola línea en el <head> de cada página:

<link rel="stylesheet" href="estilo.css">

Un solo archivo estilo.css para toda la web. Cambias ahí el tamaño de letra y cambia en las cinco páginas a la vez. Ese es todo el truco.

el mismo html, cuatro webs

Lo único que cambia entre estas cuatro es el archivo estilo.css. El contenido no se toca ni una coma.

Para cambiar de estilo se toca una sola línea del head. Ver cuatro-estilos/COMO-CAMBIAR-DE-ESTILO.md.

Contesta en una línea cada una

• ¿Qué es lo primero que quieres que vea alguien que entra?
• ¿Tu web es más de mirar o más de leer?
• ¿Fondo claro u oscuro?

No vas a copiar el ejemplo: vas a construir el tuyo, pero con una dirección tomada. Sirve para no quedarte en blanco al abrir estilo.css.

cómo se escribe una regla

body {
  background-color: #FBFAF7;
  font-size: 18px;
}

El selector (body) dice a qué afecta. Dentro van las propiedades y sus valores.

a qué afecta cada selector

p { }                    todos los párrafos
header, main { }         los dos a la vez
nav a { }                los enlaces dentro de nav
a:hover { }              cuando el ratón está encima
article:last-child { }   solo el último de la serie

todo elemento es una caja

┌─────────── margin ────────────┐
│  ┌──────── border ─────────┐  │
│  │  ┌───── padding ─────┐  │  │
│  │  │                   │  │  │
│  │  │     contenido     │  │  │
│  │  │                   │  │  │
│  │  └───────────────────┘  │  │
│  └─────────────────────────┘  │
└───────────────────────────────┘

padding: 24px;             los cuatro lados
margin: 16px 0;           arriba/abajo, luego lados
margin: 0 0 16px 0;        arriba, derecha, abajo, izquierda
border-bottom: 1px solid #ccc;

capas 1 y 2

Trabaja siempre sobre estilo.css. Este orden importa: si empiezas por los detalles, luego cambias la base y se descuadra todo.

las propiedades de la letra

font-family: "Iowan Old Style", Georgia, serif;
font-size: 18px;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.08em;
text-transform: uppercase;

dos colores y un acento

body {
  background-color: #FBFAF7;
  color: #12233A;
}

a:hover {
  background-color: #F2E94E;
}

capas 3, 4 y 5

una columna que se lee

header, main, footer {
  max-width: 640px;
  margin: 0 auto;
}

max-width pone un tope al ancho. margin: 0 auto reparte el espacio sobrante a los dos lados por igual, así que centra el bloque.

el menú en fila, y las imágenes

nav {
  display: flex;       pone los hijos en fila
  gap: 20px;            separación entre ellos
  flex-wrap: wrap;     que salten de línea si no caben
}

Y las imágenes, siempre, sin excepción:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Así una foto enorme nunca se sale de la pantalla, y no se deforma.

reglas solo para pantallas pequeñas

@media (max-width: 600px) {
  body { font-size: 17px; padding: 16px; }
  h1   { font-size: 27px; }
}

Lo de dentro solo se aplica si la pantalla mide 600px o menos. Y pisa a lo de arriba: por eso va siempre al final del archivo. Eso es la cascada.

chuleta · css

para la próxima sesión

• Trae la carpeta terminada, con las páginas que quieras publicar.
• Trae tu cuenta de GitHub ya creada.
• Y la contraseña apuntada en un papel. En serio: cada edición hay alguien que no puede entrar.

La próxima la publicamos de verdad, entendiendo cada paso. Sales de la sesión 3 sabiendo actualizarla tú sola.