HTML Guides for operator

A background value has a comma or slash where the shorthand doesn't allow one, and the usual cause is a gradient whose color stops have positions but no colors.

Each color stop in linear-gradient() or radial-gradient() is a color followed by an optional position, such as #0d47a1 0%. When a theme setting or template variable that should print the color comes out empty, the generated CSS reads linear-gradient(90deg, 0%, 100%). With no colors left, the commas don't separate color stops anymore, and the validator reports , as an incorrect operator. Browsers ignore the whole declaration, so the element gets no background from that rule.

The message can also name /. In the background shorthand, a slash only goes between a position and a size, as in center / cover. Writing url(photo.jpg) / cover or no-repeat / cover, with no position before the slash, triggers the same error.

When the CSS comes from a template, look at the output rather than the source: fill in the missing colors, or skip the gradient when no colors are set.

Invalid example

<div style="background: linear-gradient(90deg, 0%, 100%);">

<p>Banner text</p>

</div>

Valid example

<div style="background: linear-gradient(90deg, #0d47a1 0%, #42a5f5 100%);">

<p>Banner text</p>

</div>

The values of the padding property are separated by spaces, not commas: write padding: 10px 20px, not padding: 10px, 20px.

padding is a shorthand that takes one to four lengths or percentages. One value applies to all four sides. Two values set the top and bottom, then the left and right. Three set the top, then left and right, then the bottom. Four go clockwise from the top: top, right, bottom, left.

In CSS a comma separates the items of a list, such as the fonts in font-family or the layers in box-shadow. padding doesn't take a list, so the validator reports the comma as an incorrect operator. Browsers drop the whole declaration, and the element keeps whatever padding an earlier rule gave it, or none. The habit often comes from JavaScript, or from CSS functions like rgb(255, 0, 0) where commas separate the arguments.

Invalid example

<div style="padding: 10px, 20px;">

<p>Card content</p>

</div>

Valid example

<div style="padding: 10px 20px;">

<p>Card content</p>

</div>