Validación HTML: CSS: “X”: Missing a semicolon before the property name “Y”.

Acerca de este problema de CSS

CSS uses semicolons as delimiters between declarations. When you forget one, the parser tries to interpret the next property name as part of the previous declaration’s value. For example, if you write z-index: auto content: "", the parser reads auto content as if it were the value of z-index, which is invalid. It then encounters the colon after what it expected to be a value, resulting in a parsing error that can cause one or more of your declarations to be silently ignored.

This is a problem for several reasons:

Broken styles: The browser will typically discard the malformed declaration and potentially subsequent ones, leading to unexpected visual results that can be difficult to debug.
Standards compliance: The CSS specification requires semicolons between declarations. While the last declaration in a block technically doesn’t need a trailing semicolon, omitting it is a common source of bugs when new declarations are added later.
Maintainability: Always including semicolons — even on the last declaration — is a widely recommended best practice. It prevents this exact class of errors when code is edited or rearranged in the future.

To fix this issue, locate the line referenced in the error message and check the declaration immediately before it. Add the missing semicolon at the end of that declaration.

Examples

❌ Missing semicolon between declarations

The semicolon is missing after z-index: auto, so the parser cannot recognize content as a new property:

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

✅ Fixed with semicolon added

Adding the semicolon after auto properly terminates the z-index declaration:

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

❌ Missing semicolon with shorthand properties

Shorthand values with multiple parts can make it harder to spot the missing semicolon:

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

✅ Fixed shorthand example

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

❌ Missing semicolon on the last declaration causes issues when editing

While technically valid, omitting the trailing semicolon on the last declaration becomes a bug the moment a new line is added:

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

Here, background: blue was originally the last declaration (without a semicolon). When border-radius was added afterward, the missing semicolon was not noticed.

✅ Best practice: always include a trailing semicolon

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

By consistently ending every declaration with a semicolon — including the last one in each rule block — you avoid this error entirely and make your stylesheets easier to maintain.