Anatomía de una regla CSS

El Bloque I terminó sabiendo conectar una hoja de estilos con <link rel="stylesheet" href="estilos.css">. Ahora llega la pregunta natural: ¿qué se escribe dentro de ese archivo? La respuesta es: reglas CSS.

---

La regla: selector + bloque de declaraciones

Una regla CSS es la unidad básica del lenguaje. Tiene dos partes obligatorias:

selector {
  propiedad: valor;
}

• Selector — a qué elemento del HTML se le aplica la regla. En este módulo usamos el selector de tipo: el nombre del elemento tal cual (h1, p, body). p significa “todos los <p> de la página”.
• Bloque de declaraciones — las llaves { } y todo lo que va adentro. Es la lista de cambios visuales para ese elemento.

El diagrama de anatomía de la regla con todos sus nombres:

h1          {  color: teal;  }
│              └─────┬────┘
selector       una declaración
            └────────┬───────────┘
              bloque de declaraciones (entre llaves)

“Regla” = selector + bloque completo. La regla de arriba se lee: “a todos los <h1>, ponéles el color teal”.

El selector de tipo conecta los dos lenguajes: el CSS estila los mismos elementos HTML que aprendiste en el Bloque I — h1, h2, p, ul, body.

---

La declaración: propiedad + valor

Una declaración es un par dentro del bloque:

color: teal;
│      │    │
│      │    └─ punto y coma: cierra la declaración
│      └────── valor (teal)
└───────────── propiedad (color)

• Propiedad y valor se separan con dos puntos :.
• La declaración termina con punto y coma ;.
• Para aplicar varios cambios a un mismo elemento, escribís varias declaraciones, una por línea:

h1 {
  color: white;
  background-color: teal;
}

Por qué el ;: el punto y coma separa declaraciones. La última del bloque puede omitirse y la regla sigue siendo válida — pero la buena práctica es ponerlo siempre: cuando agregás una declaración nueva debajo, no tenés que acordarte de poner el ; que faltaba en la anterior.

El orden importa: es propiedad: valor, nunca al revés. color: red es correcto; red: color es un sinsentido que el navegador descarta sin avisar.

---

Comentarios /* */

Un comentario en CSS se escribe entre /* y */. El navegador lo ignora por completo — sirve para dejar notas en el código:

/* Estilos del encabezado principal */
h1 {
  color: teal; /* el color de la marca */
}

Puntos finos:

• Puede ser multilínea: /* abre y */ cierra, aunque haya saltos de línea en medio.
• No existe // en CSS. Quien viene de JavaScript tiende a escribir // comentario — en CSS eso no es un comentario: el navegador intenta interpretarlo como código y puede romper la regla siguiente. El único comentario en CSS es /* */.
• No se anidan: un /* dentro /* otro */ el resto se cierra en el primer */ — lo que quede afuera puede romperse.

Límite del motor: un comentario /* */ no produce ningún efecto computable, por eso no hay un check que pueda verificar “el alumno escribió un comentario”. El comentario se pide en el enunciado y se modela en el starter; el validador comprueba los colores aplicados, no la presencia del comentario.

---

La pestaña CSS = la hoja externa simulada

En el sandbox, la pestaña CSS es exactamente eso: la hoja estilos.css que aprendiste a vincular en CAT-11. El motor toma el contenido de esa pestaña y lo inyecta en el documento del preview, igual que haría <link rel="stylesheet">.

Lo que escribís en la pestaña CSS es lo que irías a escribir en estilos.css en un proyecto real. El <link> ya está puesto por el sandbox — tu trabajo es llenar la hoja.

Así quedará el sitio del café una vez que escribas las dos reglas del ejercicio.

---

Tu turno: en la pestaña CSS, escribí una regla para h1 con color: white y background-color: teal, y una regla para p con color: gray. Agregá al menos un comentario /* */. Luego hacé clic en “Comprobar”.