Una regla de CSS tiene dos partes: a quién le aplica y qué le hace.

h1  {  color: red;  }
 ↑         ↑      ↑
quién   qué    valor

El CSS va dentro de una etiqueta <style>, y cada línea termina en punto y coma.

A CSS rule has two parts: who it applies to and what it does to them.

h1  {  color: red;  }
 ↑         ↑      ↑
 who     what   value

CSS goes inside a <style> tag, and each line ends with a semicolon.

Poner p afecta a todos los párrafos. Para elegir solo algunos se usan clases.

En el HTML le pones class="destacado", y en el CSS lo eliges con un punto adelante: .destacado.

Un elemento puede tener varias clases separadas por espacio. Es la forma en que está hecho el 99% del CSS del mundo, incluido el de este sitio.

Writing p affects every paragraph. To pick only some, use classes.

In the HTML you add class="highlight", and in the CSS you select it with a leading dot: .highlight.

An element can have several classes separated by spaces. It is how 99% of the world's CSS is written, including this site's.

Esta es la idea más importante de CSS: cada elemento es un rectángulo, y tiene tres espacios a su alrededor.

• padding — espacio por dentro, entre el borde y el contenido.
• border — el borde en sí.
• margin — espacio por fuera, que lo separa de los demás.

Confundir padding con margin es el error número uno al empezar. Truco para recordarlo: padding es relleno, margin es distancia.

This is the most important idea in CSS: every element is a rectangle, with three spaces around it.

• padding — space inside, between the border and the content.
• border — the border itself.
• margin — space outside, separating it from others.

Mixing up padding and margin is beginner mistake number one. Trick: padding is stuffing, margin is distance.

Por defecto, las cajas se apilan una debajo de otra. Para ponerlas en fila —o centrarlas— se usa flexbox, que hoy es la herramienta estándar.

Le pones display: flex al contenedor, y sus hijos se ordenan según lo que le digas.

By default, boxes stack one below the other. To put them in a row — or centre them — you use flexbox, today's standard tool.

You give display: flex to the container, and its children arrange themselves as you tell them.

Escribir reglas, elegir por etiqueta o por clase, colores, el modelo de caja (padding, border, margin) y ordenar con flexbox.

Ya tienes estructura y aspecto. Falta lo tuyo: hacer que la página cambie con código.

Writing rules, selecting by tag or class, colours, the box model (padding, border, margin) and arranging with flexbox.

You have structure and looks. Now for your part: making the page change with code.