Sintaxis CSS

Ya sabes que CSS da estilo al HTML. En esta sesión nos fijamos en la gramática de una regla, para que puedas leer y escribir estilos sin dudar de dónde van las llaves, los dos puntos y el punto y coma.

¿Qué es la sintaxis de CSS?

La sintaxis de CSS es el patrón fijo con el que se escribe una regla de estilo. Casi todas las reglas del día a día siguen la misma forma: eliges qué quieres estilizar (el selector), abres un bloque de declaraciones con {, escribes una o más declaraciones y lo cierras con }. Cada declaración une una propiedad con un valor.

Anatomía de una regla CSS

Divide la regla en partes con nombre. Cuando sepas identificar cada pieza, encontrar un error de escritura te resultará mucho más fácil.

Una regla con sus partes señaladas

Esta es una regla mínima en la que se ve cada pieza importante. Los selectores los veremos con más detalle en sesiones posteriores; aquí lo que importa es acertar con la estructura.

Léela de izquierda a derecha

• p — selector (todos los párrafos)
• { … } — bloque de declaraciones
• color — propiedad
• : — separa la propiedad del valor
• teal — valor
• ; — cierra la declaración
  Los espacios y los saltos de línea son flexibles. Podrías escribir p{color:teal;} en una sola línea y el navegador lo interpretaría igual. Aun así, para aprender y para trabajar en equipo conviene usar la forma legible en varias líneas.

Varias declaraciones en un mismo bloque

Una regla puede definir muchas propiedades para el mismo selector. Escribe cada declaración en su propia línea y ciérrala con punto y coma.

Por qué funciona

• .note es un selector de clase (practicarás las clases más adelante)
• Cuatro declaraciones comparten un único bloque de declaraciones
• El navegador aplica todas a los elementos con class="note"
• Si falta el punto y coma entre dos declaraciones, la propiedad siguiente puede no aplicarse

Agrupar selectores

Cuando varios selectores necesitan los mismos estilos, sepáralos con comas. Un solo bloque de declaraciones sirve para todos.

Cuándo agrupar

Agrupar te ahorra copiar y pegar cuando los encabezados (u otros elementos) deben compartir el mismo aspecto. Si más adelante un selector necesita un estilo propio, dale su propia regla en lugar de sobrecargar el grupo.

Lista de comprobación de la puntuación

Ten presente esta lista corta mientras escribes:

• Las llaves rodean el bloque de declaraciones
• Los dos puntos van entre la propiedad y el valor
• El punto y coma cierra cada declaración (es obligatorio antes de la siguiente; ponerlo también en la última es una buena costumbre)
• Las comas separan los selectores agrupados, no las propiedades
• Los nombres de propiedad y la mayoría de los valores con palabras clave no distinguen mayúsculas de minúsculas, pero por convención se escriben en minúsculas

Inténtalo tú mismo

1. Crea syntax.html con un párrafo <p class="note">Syntax practice</p> y un bloque <style> en el head.
2. Añade la regla .note de varias declaraciones que hemos visto en esta sesión.
3. Cambia background-color a #fef3c7, guarda y recarga la página.
4. Añade una quinta declaración, font-size: 1.125rem;, dentro del mismo bloque; guarda y vuelve a recargar.
5. Comprueba que cambian tanto el fondo como el tamaño de la letra. Si no es así, revisa las llaves y los puntos y coma.

Errores comunes

• Escribir color teal sin los dos puntos: el navegador no puede interpretar la declaración
• Olvidar { o }, de modo que las declaraciones quedan fuera del bloque y se ignoran
• Omitir el punto y coma entre dos declaraciones, con lo que la segunda propiedad no se aplica
• Poner una coma entre la propiedad y el valor (color, teal) en vez de dos puntos
• Dejar una propiedad suelta, sin selector ni llaves: eso no es una regla completa

Resumen

• Sintaxis de CSS = selector + bloque de declaraciones { } con sus declaraciones
• Una declaración tiene la forma property: value;
• Un bloque puede contener muchas declaraciones para el mismo selector
• Las comas agrupan selectores que comparten estilos
• Cuidar las llaves, los dos puntos y el punto y coma evita fallos silenciosos
• Practica cambiando valores y añadiendo declaraciones, y recarga la página para ver el resultado