Validación HTML: CSS: "X": Falta un punto y coma antes del nombre de propiedad "Y".

Acerca de este problema de CSS

CSS utiliza puntos y comas como delimitadores entre declaraciones. Cuando olvidas uno, el analizador trata de interpretar el siguiente nombre de propiedad como parte del valor de la declaración anterior. Por ejemplo, si escribes z-index: auto content: "", el analizador lee auto content como si fuera el valor de z-index, lo cual no es válido. Luego encuentra los dos puntos después de lo que esperaba que fuera un valor, resultando en un error de análisis que puede hacer que una o más de tus declaraciones sean ignoradas silenciosamente.

Este es un problema por varias razones:

Estilos rotos: El navegador típicamente descartará la declaración malformada y potencialmente las siguientes, llevando a resultados visuales inesperados que pueden ser difíciles de depurar.
Cumplimiento de estándares: La especificación CSS requiere puntos y comas entre declaraciones. Aunque la última declaración en un bloque técnicamente no necesita un punto y coma final, omitirlo es una fuente común de errores cuando se añaden nuevas declaraciones más tarde.
Mantenibilidad: Incluir siempre puntos y comas — incluso en la última declaración — es una práctica recomendada ampliamente aceptada. Previene exactamente esta clase de errores cuando el código es editado o reorganizado en el futuro.

Para solucionar este problema, localiza la línea referenciada en el mensaje de error y revisa la declaración inmediatamente anterior. Añade el punto y coma faltante al final de esa declaración.

Ejemplos

❌ Punto y coma faltante entre declaraciones

Falta el punto y coma después de z-index: auto, por lo que el analizador no puede reconocer content como una nueva propiedad:

<style>
  .overlay {
    z-index: auto
    content: "";
    display: block;
  }
</style>

✅ Corregido añadiendo el punto y coma

Añadir el punto y coma después de auto termina correctamente la declaración z-index:

<style>
  .overlay {
    z-index: auto;
    content: "";
    display: block;
  }
</style>

❌ Punto y coma faltante con propiedades abreviadas

Los valores abreviados con múltiples partes pueden hacer más difícil detectar el punto y coma faltante:

<style>
  .card {
    margin: 10px 20px 10px 20px
    padding: 1em;
    border: 1px solid #ccc;
  }
</style>

✅ Ejemplo abreviado corregido

<style>
  .card {
    margin: 10px 20px 10px 20px;
    padding: 1em;
    border: 1px solid #ccc;
  }
</style>

❌ Punto y coma faltante en la última declaración causa problemas al editar

Aunque técnicamente válido, omitir el punto y coma final en la última declaración se convierte en un error en el momento que se añade una nueva línea:

<style>
  .button {
    color: white;
    background: blue
    border-radius: 4px;
  }
</style>

Aquí, background: blue era originalmente la última declaración (sin punto y coma). Cuando border-radius fue añadido después, no se notó el punto y coma faltante.

✅ Mejor práctica: incluir siempre un punto y coma final

<style>
  .button {
    color: white;
    background: blue;
    border-radius: 4px;
  }
</style>

Al terminar consistentemente cada declaración con un punto y coma — incluyendo la última en cada bloque de regla — evitas completamente este error y haces que tus hojas de estilo sean más fáciles de mantener.