Verificação HTML: CSS: "X": Falta um ponto e vírgula antes do nome da propriedade "Y".

Sobre este problema de CSS

CSS usa pontos e vírgulas como delimitadores entre declarações. Quando você esquece um, o analisador tenta interpretar o próximo nome de propriedade como parte do valor da declaração anterior. Por exemplo, se você escrever z-index: auto content: "", o analisador lê auto content como se fosse o valor de z-index, o que é inválido. Ele então encontra os dois pontos após o que esperava ser um valor, resultando num erro de análise que pode fazer com que uma ou mais das suas declarações sejam silenciosamente ignoradas.

Isto é um problema por várias razões:

Estilos quebrados: O navegador normalmente descarta a declaração malformada e potencialmente as subsequentes, levando a resultados visuais inesperados que podem ser difíceis de depurar.
Conformidade com padrões: A especificação CSS requer pontos e vírgulas entre declarações. Embora a última declaração num bloco tecnicamente não precise de um ponto e vírgula no final, omiti-lo é uma fonte comum de bugs quando novas declarações são adicionadas posteriormente.
Manutenibilidade: Incluir sempre pontos e vírgulas — mesmo na última declaração — é uma prática recomendada amplamente seguida. Previne exatamente esta classe de erros quando o código é editado ou reorganizado no futuro.

Para corrigir este problema, localize a linha referenciada na mensagem de erro e verifique a declaração imediatamente antes dela. Adicione o ponto e vírgula em falta no final dessa declaração.

Exemplos

❌ Ponto e vírgula em falta entre declarações

O ponto e vírgula está em falta após z-index: auto, por isso o analisador não consegue reconhecer content como uma nova propriedade:

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

✅ Corrigido com ponto e vírgula adicionado

Adicionar o ponto e vírgula após auto termina adequadamente a declaração z-index:

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

❌ Ponto e vírgula em falta com propriedades abreviadas

Valores abreviados com múltiplas partes podem tornar mais difícil detetar o ponto e vírgula em falta:

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

✅ Exemplo abreviado corrigido

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

❌ Ponto e vírgula em falta na última declaração causa problemas ao editar

Embora tecnicamente válido, omitir o ponto e vírgula final na última declaração torna-se um bug no momento em que uma nova linha é adicionada:

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

Aqui, background: blue era originalmente a última declaração (sem ponto e vírgula). Quando border-radius foi adicionado depois, o ponto e vírgula em falta não foi notado.

✅ Melhor prática: incluir sempre um ponto e vírgula final

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

Ao terminar consistentemente cada declaração com um ponto e vírgula — incluindo a última em cada bloco de regra — você evita completamente este erro e torna as suas folhas de estilo mais fáceis de manter.