HTML Guide

CSS: Lexical error at line X, column Y. Encountered: Z

A lexical error in a CSS block often indicates a typo or invalid character in your inline CSS or a <style> element.

CSS must adhere to standard syntax, using correct property names, values, and punctuation. Common causes include missing semicolons, invalid property names, or special characters that are not allowed in CSS. Only standard ASCII characters should be used, and comments must be properly formatted.

Example of incorrect CSS in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bad CSS Example</title>
  <style>
    h1 {
      color: blue@
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Heading</h1>
</body>
</html>

In the example above, the @ character after blue is not valid in CSS and will cause a lexical error.

Corrected HTML example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Good CSS Example</title>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Heading</h1>
</body>
</html>

Always check for unexpected characters, properly close all CSS declarations with a semicolon, and ensure only valid CSS is included. For external CSS, make sure the file does not contain any invalid characters or typos.

Related W3C validator issues

CSS: “background-blend-mode”: X is not a “background-blend-mode” value.

background-blend-mode only accepts certain keywords as values, such as normal, multiply, screen, and others.

The background-blend-mode property in CSS specifies how background images and background colors blend together. Its value must be one or more blend mode keywords defined by CSS, for example, normal, multiply, screen, overlay, etc. Using an unrecognized value will generate a validation error.

Valid values include:

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

Example of an invalid value:

/* Invalid: 'X' is not a recognized value */
background-blend-mode: X;

Example of a valid value:

/* Valid: 'multiply' is a recognized blend mode */
background-blend-mode: multiply;

Example HTML with correct CSS property:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Background Blend Mode Example</title>
  <style>
    .blended-bg {
      background-image: url('image1.jpg'), url('image2.jpg');
      background-blend-mode: overlay;
    }
  </style>
</head>
<body>
  <div class="blended-bg" style="width:200px; height:200px;">
    Blended background
  </div>
</body>
</html>

Replace any invalid values for background-blend-mode in your CSS with one of the supported keywords.

CSS: “background-image”: X is not a “background-image” value.

background-image attribute values must use valid CSS syntax.

The background-image property in CSS expects the value to be a valid image reference, such as none, url("image.png"), gradients, or inherit.

Correct CSS Syntax:

background-image: url("background.jpg");

Correct usage in HTML (inline style):

<div style="background-image: url('background.jpg');">
  Content here
</div>

Incorrect usage (missing url() or filename only):

<div style="background-image: background.jpg;">
  Content here
</div>

Correct usage in a <style> block:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Background Image Example</title>
    <style>
      .banner {
        background-image: url("banner.png");
      }
    </style>
  </head>
  <body>
    <div class="banner">Welcome</div>
  </body>
</html>

Always wrap the image path with the url() function and use quotes for paths containing special characters.

CSS: “background”: X is not a “background-color” value.

There’s an invalid value for the background property in your CSS. The W3C HTML Validator has attempted to match the value to a background color, without success.

Here’s how to resolve this issue:

Identify the Correct CSS Configuration: The background property in CSS can take various forms, such as a color, an image, or a combination of background components. Ensure you provide a valid value.
Correct the Value: If you meant to set a background color, use a valid color format (e.g., hexadecimal, RGB, RGBA, named color, etc.).

Valid CSS Examples:

Using a named color:
```
.example {
  background: blue;
}
```
Using a hexadecimal color:
```
.example {
  background: #00ff00;
}
```

Using an RGB color:

.example {
  background: rgb(255, 0, 0);
}

Using an RGBA color (with transparency):

.example {
  background: rgba(255, 0, 0, 0.5);
}

Setting an image as background:

.example {
  background: url('image.jpg');
}

Combining multiple background properties:

.example {
  background: url('image.jpg') no-repeat center/cover;
}

CSS: “border-radius”: X is not a “border-radius” value

The value specified for the border-radius CSS property is not valid.

The border-radius property expects a valid length or percentage value (like 5px, 10%, etc.). Using a CSS variable only works if the variable is properly defined in a CSS rule somewhere in the document, and the HTML is interpreted by a browser that supports CSS custom properties.

For example, if you write:

<div style="border-radius: var(--my-border-radius);"></div>

but never define --my-border-radius, it triggers an error.

Solution:

Define the CSS variable before using it, or use a fixed value instead.

Example 1: Using a fixed value

<div style="border-radius: 8px;"></div>

Example 2: Defining the variable in CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Variable Border Radius Example</title>
    <style>
      :root {
        --my-border-radius: 8px;
      }
      .rounded {
        border-radius: var(--my-border-radius);
      }
    </style>
  </head>
  <body>
    <div class="rounded">Border radius via variable</div>
  </body>
</html>

Using custom properties in inline style attributes is valid in modern browsers if the variable is defined, but some validators may flag it if they can’t resolve the variable. For best validator compatibility, use static, valid CSS values.

CSS: “border”: Too many values or values are not recognized.

CSS
border

The border property in your CSS has too many values or uses incorrect values.

According to the CSS specification, the shorthand border property accepts the following, in any order: border-width, border-style, and border-color, but each should occur at most once and be a valid value.

Common mistakes:

Adding extra values, such as two widths or two colors.
Using an invalid border-style.
Misspelling keywords.

Correct syntax:

selector {
  border: border-width border-style border-color;
}

border-width: e.g., 1px, thin, 0
border-style: e.g., solid, dashed, none
border-color: e.g., #ff0, red, rgb(255,0,0)

Valid examples:

/* Valid shorthand: width, style, color */
div {
  border: 2px solid black;
}

p {
  border: thin dashed #00f;
}

section {
  border: 0 none;
}

Make sure your border property contains at most one valid value each for width, style, and color, and not more than three total.

CSS: “border-width”: X is not a “border-width” value.

border-width in CSS accepts specific keywords (thin, medium, thick) or valid length values (px, em, etc.).

The border-width property controls the thickness of a border around an element, and only accepts values such as length units (like 2px, 0.5em, 3pt) or the keywords: thin, medium, and thick. Using any other value (such as an unsupported unit or a misspelled keyword) will generate a validator error. Check your CSS for border widths that use incorrect or unsupported values.

Example of incorrect usage:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Invalid border-width Example</title>
  <style>
    .box {
      border-style: solid;
      border-width: large;  /* invalid: "large" is not allowed */
    }
  </style>
</head>
<body>
  <div class="box">Invalid border-width</div>
</body>
</html>

Example of correct usage:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Valid border-width Example</title>
  <style>
    .box {
      border-style: solid;
      border-width: 5px;  /* valid: uses "px" unit */
    }
  </style>
</head>
<body>
  <div class="box">Valid border-width</div>
</body>
</html>

Permitted values for border-width include:

Length units: px, em, rem, pt, etc.
Keywords: thin, medium, thick

Example with keywords:

<div style="border-style: solid; border-width: thick;">
  Thick border with keyword
</div>

Replace any invalid value with a valid length or one of the accepted keywords to resolve the validation error.

CSS: “box-shadow”: X is not a “box-shadow” value.

The value provided for the box-shadow CSS property is invalid.

The box-shadow property requires a valid set of length, color, and optionally other parameters to describe shadow effects on elements. A typical box-shadow value must specify horizontal and vertical offsets, and may include blur radius, spread radius, and color, in that order. Syntax errors such as missing units, wrong order, or invalid keywords will trigger validation errors.

Correct syntax:

box-shadow: <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?;

<offset-x> and <offset-y> are required and must use valid CSS length units (like px, em, rem).
<blur-radius>, <spread-radius>, and <color> are optional.
Multiple shadows can be comma-separated.

Example of invalid usage:

<div style="box-shadow: 10 10;">Invalid box-shadow</div>

In this example, the values 10 10 are missing units (px).

Example of a valid, W3C-compliant usage:

<div style="box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);">
  Valid box-shadow
</div>

Example with multiple shadows:

<div style="box-shadow: 2px 2px 5px #888, 0px 0px 10px 2px blue;">
  Multiple shadows example
</div>

Always ensure each length value has a correct unit, colors are valid, and values are in the correct order to pass validation.

CSS: “cursor”: “hand” is not a “cursor” value.

Replace the cursor value hand with the standard pointer to indicate a clickable item, as the CSS cursor: hand is not valid in modern web standards.

CSS specifies the cursor property to change the appearance of the mouse pointer over an element, to indicate the interaction type. The value hand was utilized in old versions of Internet Explorer to denote a clickable link or button. However, the CSS specification uses pointer as the standard value to imply that an area is interactive or clickable, such as hyperlinks or buttons.

If you’re using cursor: hand, it will not be recognized by browsers following the current CSS standard, leading to the W3C Validator warning about an invalid value. To resolve this issue, simply replace hand with pointer. This change makes sure that the appearance of the cursor is displayed according to the intended behavior across all modern browsers and platforms.

Example

Invalid CSS:

button {
  cursor: hand; /* Invalid value */
}

Valid CSS:

button {
  cursor: pointer; /* Correct standard value */
}

In both code snippets, the CSS is applied to a button element. By using cursor: pointer, the mouse pointer turns into a hand icon, indicating that the button is clickable and adheres to the W3C standards.

CSS: “font-size”: X is not a “font-size” value.

A value specified for the font-size property in your CSS is not a valid CSS length or keyword.

The font-size property accepts values such as keywords (small, large), absolute and relative lengths (px, em, rem, pt), or percentages. Invalid values, like font-size: X;, are not recognized and trigger a validation error.

Common valid values for font-size:

Keywords: small, medium, large, etc.
Length units: 12px, 1em, 0.9rem, 10pt
Percentages: 120%

Example with a valid value:

<p style="font-size: 16px;">This text uses a valid font size.</p>

Example using a keyword:

<p style="font-size: large;">This text uses a valid keyword.</p>

Full HTML example (valid):

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Valid Font Size Example</title>
  </head>
  <body>
    <p style="font-size: 1.2em;">Valid font size using em unit.</p>
  </body>
</html>

Check that all font-size values use proper CSS units or accepted keywords to resolve the validation warning.

CSS: “font”: X is not a “font-family” value.

The font property should be used to set font-related attributes like font-style, font-variant, font-weight, font-size, line-height, and font-family. If you’re only trying to set font-weight, use the font-weight property instead.

Correct usage:

font-weight: 300; /* Correct syntax for setting font weight */

If you want to set multiple font properties at once, use the font shorthand correctly:

font: 300 16px/1.5 "Helvetica", sans-serif; /* font-weight font-size/line-height font-family */

Ensure that the font-family part is specified and valid.