Curso de CSS / sintaxis: selectores, declaraciones, comentarios y errores

Una regla de CSS combina un selector con declaraciones escritas como propiedad: valor; dentro de llaves. Una sintaxis correcta ayuda al navegador a aplicar los estilos previstos, pero una declaración con errores puede ser ignorada mientras que otras declaraciones válidas continúan funcionando.

Lee las partes de una regla de CSS

.notice {
  color: #087f5b;
  padding: 16px;
}

Cada propiedad permite diferentes valores. Escribe el valor del color en color y el valor de la longitud en padding. padding: blue; no es un valor válido de relleno aunque la palabra esté escrita correctamente. 16px se escribe con números y unidades. Si introduces un espacio como 16 px, no se leerá como un valor de longitud único.

Usa llaves, dos puntos, puntos y coma y espacios en blanco

Los saltos de línea y la sangría ayudan a que el código sea más fácil de leer para los humanos. Las siguientes dos reglas se aplican de la misma manera porque tienen el mismo selector y la misma declaración. Cuando estás aprendiendo, es más fácil encontrar símbolos faltantes si separas las declaraciones línea por línea. Para elegir el selector según los elementos que quieres estilizar, consulta Selectores CSS Básicos: Tipo, Clase, ID y Atributos.

.notice { color: #087f5b; padding: 16px; }

.notice {
  color: #087f5b;
  padding: 16px;
}

Aunque la declaración final puede omitir su punto y coma, escribirlo de manera consistente hace que las adiciones posteriores sean más seguras. El espacio en blanco del selector puede cambiar su significado: .notice.urgent coincide con un elemento con ambas clases, mientras que .notice .urgent coincide con un elemento de clase urgent descendiente de uno de clase notice. Eliminar ese espacio cambia el selector. Consulta MDN: Introducción.

Agrupa selectores y escribe comentarios

h1, h2 {
  color: #087f5b;
}

/* Apply the background and border only to the notice. */
.notice {
  background-color: #e9f7ef;
  border: 1px solid #087f5b;
}

Una coma enlaza múltiples selectores al mismo bloque de declaraciones. h1, h2 selecciona h1 y h2 respectivamente, y h1 h2 es otro selector que encuentra h2 dentro de h1. Una coma es apropiada para el propósito de aplicar el mismo color.

Los comentarios en CSS empiezan con /* y terminan con */. Las declaraciones dentro de los comentarios no se ejecutan en el estilo. Puede ser usado para escribir una explicación o para excluir temporalmente una regla, pero si se omite el símbolo de cierre, el código detrás de él puede ser tratado como un comentario. En CSS regular, // de JavaScript no se usa como notación de comentario de una sola línea.

Compara errores de declaración y errores de selector

Cuando un navegador encuentra un error en CSS, ignora la parte inválida y continúa procesando posibles reglas. Esto no siempre significa "ignorar una línea que está mal". Los delimitadores faltantes o los errores de selector pueden tener un gran impacto.

.notice {
  color: blue;
  padding: blue;
  background-color: #e9f7ef;
}

Solo padding: blue es inválido aquí. A menos que haya otras reglas, se aplican el color del texto y el color de fondo, y el padding no se modifica con esta declaración. Incluso si la propiedad está escrita incorrectamente, como colro, la declaración no será reconocida.

.notice {
  color: blue
  background-color: #e9f7ef;
  padding: 16px;
}

Este bloque carece de un punto y coma después de la primera declaración. El navegador interpreta blue background-color: #e9f7ef como el valor de color, lo cual es inválido. Ni el color previsto ni la declaración de fondo prevista se aplican, pero padding: 16px; aún sí se aplica. Agrega el punto y coma que falta después de blue.

h1, .notice:made-up-state {
  color: blue;
}

Una pseudo-clase desconocida hace que esta lista de selectores ordinaria separada por comas sea inválida, por lo que la regla tampoco se aplica a h1. Ciertas listas de selectores especiales usan un análisis tolerante. Por lo tanto, este ejemplo no describe el comportamiento de todos los contextos de lista de selectores. Consulta MDN: Manejo de errores.

Ejecuta el ejemplo completo

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1, h2 { color: #087f5b; }
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
      padding: 16px;
      border: 1px solid #087f5b;
    }
    /* Sentence describing operating hours */
    .description { font-size: 18px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <h2>Visitor Information</h2>
  <p class="description">Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Si guardas todo el código como index.html y lo abres, h1 y h2 son del mismo verde, y el aviso tiene un fondo claro, 16px de relleno y un borde de 1px. Las frases descriptivas aparecen a 18px. font-size es la propiedad que establece el tamaño de la fuente, line-height es la altura de línea, y border es el borde. Aquí se utiliza como propiedad auxiliar para vincular la sintaxis y los resultados.

Encuentra y corrige los errores de sintaxis

Reemplaza el bloque .notice en todo el ejemplo con el código de abajo. El objetivo es corregir dos errores de sintaxis y lograr “texto azul, fondo verde claro, 16px de relleno”. Puedes revertir fácilmente copiando el archivo original con un nombre diferente antes de cambiarlo.

.notice {
  colro: blue;
  background-color #e9f7ef;
  padding: 16px;
}

Cambia colro por color y añade dos puntos después de background-color. Guarda y recarga la página: el aviso debe tener texto azul, un fondo verde claro y un relleno de 16px. El relleno ya era válido, por lo que algo de espacio puede permanecer incluso antes de que se corrijan los errores de sintaxis.

.notice {
  color: blue;
  background-color: #e9f7ef;
  padding: 16px;
}

Si la edición no cambia la página, comprueba primero que has abierto el archivo correcto. Después, consulta Inspeccione CSS con DevTools: Estilos y Computado para ver qué valores se aplican realmente. Distingue los errores de sintaxis, los selectores que coinciden con el elemento incorrecto y los conflictos entre reglas antes de cambiar más valores.