Sintaxis CSS

CSS es un lenguaje de reglas: cada fragmento de CSS que escribís está compuesto por una o más reglas, y cada regla sigue siempre la misma gramática. No hay excepciones al patrón — ya sea que estés declarando el color de un párrafo o animando un elemento con treinta propiedades, la estructura es idéntica. Conocer esa estructura de memoria es el prerequisito para leer, escribir y depurar cualquier código CSS.

Una regla CSS tiene dos partes obligatorias: el selector (a quién se le aplica el estilo) y el bloque de declaraciones (qué se le aplica). El selector va primero, seguido del bloque entre llaves. Dentro del bloque van las declaraciones, cada una formada por una propiedad y un valor separados por dos puntos, y terminada con punto y coma. Si te falta cualquiera de estas piezas, el navegador descarta la regla silenciosamente.

Entender la sintaxis también es entender los errores. CSS no lanza excepciones ni detiene la ejecución: cuando encuentra algo que no reconoce — un typo en el nombre de una propiedad, un valor inválido, una llave sin cerrar — simplemente lo ignora y sigue procesando el resto del archivo. Por eso la sintaxis correcta no es un detalle menor: un error tipográfico en la llave o en el separador :/; puede hacer que ninguna declaración del bloque se aplique, sin ningún aviso visible.

Cómo funciona

La regla: selector + bloque de declaraciones

El patrón completo de una regla CSS es siempre este:

selector {
  propiedad: valor;
  propiedad: valor;
}

El selector determina a qué elemento (o elementos) del HTML se le aplicarán las declaraciones. Puede ser tan simple como el nombre de una etiqueta (p, h1, div) o tan específico como una combinación de clase, pseudo-clase e ID. El bloque de declaraciones empieza con { y termina con }. Dentro van todas las declaraciones que se aplican a los elementos seleccionados.

Una misma regla puede tener cero, una o cien declaraciones. Una regla sin declaraciones es técnicamente válida pero no hace nada. El orden de las declaraciones dentro del bloque no tiene consecuencias para el navegador salvo cuando dos declaraciones afectan la misma propiedad — en ese caso gana la última (cascada dentro del mismo bloque).

La declaración: propiedad + valor

Cada declaración dentro del bloque sigue el patrón propiedad: valor;. La propiedad es el nombre de lo que se quiere cambiar — color, font-size, margin, display. El valor es lo que se le asigna — navy, 1rem, 24px, flex. Los dos se separan con : y la declaración termina con ;.

El punto y coma final es técnicamente opcional en la última declaración del bloque, pero omitirlo es una práctica peligrosa: si después agregás una declaración nueva encima o debajo, el bloque puede romperse silenciosamente. La convención es siempre terminar con ;, sin excepción.

Si el navegador no reconoce el nombre de una propiedad, o si el valor no es válido para esa propiedad, ignora esa declaración y pasa a la siguiente. No hay warning, no hay error en pantalla. Por eso los bugs de typo en CSS son los más difíciles de encontrar sin DevTools.

Los comentarios: /* */

CSS soporta comentarios de bloque con la sintaxis /* texto */. Funcionan tanto en una línea como en varias. No existe un comentario de línea // en CSS estándar (sí existe en Sass/Less, pero no en CSS puro — si lo escribís, el navegador lo descartará).

/* Este es un comentario de una línea */

/*
  Este comentario
  ocupa varias líneas
*/

p {
  color: navy; /* comentario inline */
  font-size: 1rem;
}

Los comentarios no generan ningún output en la página y se ignoran completamente durante el renderizado. Son útiles para explicar decisiones de diseño, desactivar temporalmente código durante el debugging o marcar secciones del archivo.

Espacios en blanco e indentación

CSS ignora los espacios en blanco extra (saltos de línea, indentación, espacios múltiples). Estas dos reglas son exactamente equivalentes para el navegador:

/* estilos expandidos (legible) */
h1 {
  color: navy;
  font-size: 2rem;
}

/* estilos compactos (válido pero difícil de leer) */
h1{color:navy;font-size:2rem;}

La convención es siempre escribir una declaración por línea con indentación consistente (2 o 4 espacios). Las herramientas de build (minificadores) se encargan de comprimir el CSS en producción; vos escribís para que sea legible por humanos.

Gotchas conceptuales

• El navegador ignora errores silenciosamente. A diferencia de HTML o JavaScript, CSS no muestra errores en pantalla. Si una declaración no tiene efecto, la primera sospecha siempre es un error de sintaxis — typo en el nombre, falta el : o el ;, o el valor no es válido para esa propiedad. Abrí DevTools → pestaña “Styles” → las declaraciones tachadas tienen error.
• No existe // para comentarios en CSS puro. // color: red; es ignorado por el navegador, no comentado. Para comentar, siempre /* color: red; */.
• Falta la } de cierre rompe todo lo que sigue. Si abrís un bloque con { y nunca lo cerrás, el navegador puede ignorar todas las reglas que siguen en el archivo, dependiendo del parser. Es el error que más confunde porque la causa está lejos del síntoma.
• Mayúsculas y minúsculas. Los nombres de propiedad y valores de CSS son insensibles a mayúsculas (Color, COLOR y color son lo mismo), pero los valores de cadena — como los nombres de fuentes — sí distinguen mayúsculas. La convención es siempre minúsculas.
• El ; final no es opcional en la práctica. Aunque la última declaración de un bloque puede omitirlo, agregá siempre el ; para evitar errores al editar el archivo después.

Vigente / legacy

La sintaxis de regla selector { propiedad: valor; } es el núcleo del CSS desde CSS1 (1996) y no tiene alternativa legacy. Lo que sí fue legacy: la notación @import de hojas externas como alternativa a <link> (funcional pero con penalización de rendimiento — hoy se prefiere siempre <link>). Los comentarios /* */ también son universales; no hay forma legacy de comentar.