HTML Guide for CSS
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.
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.
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; }
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.
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.
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.
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.
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.
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.
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.
The gap property in CSS does not accept auto as a valid value.
The gap property is used with CSS Grid and Flexbox layouts to define the spacing between grid tracks or flex items. Acceptable values for gap include length values such as px, em, %, or keywords such as normal. The value auto is not valid for the gap property; instead, use valid length units or the normal keyword.
Correct usage:
<div style="display: grid; gap: 16px;">
<div>Item 1</div>
<div>Item 2</div>
</div>Incorrect usage (produces a validation error):
<div style="display: grid; gap: auto;">
<div>Item 1</div>
<div>Item 2</div>
</div>For responsive or dynamic spacing, set the gap property to a valid length (e.g., 1rem, 10px, 5%) or use media queries to adjust spacing at different breakpoints.
The issue you’re encountering pertains to the use of the grid-column property in CSS, which is part of the CSS Grid Layout module. The grid-column property is typically used to specify how elements are placed along the grid columns in a grid layout.
The grid-column property is a shorthand for specifying both the starting grid line and the ending grid line for a grid item in order to define its horizontal position in the grid. The correct way to use it generally involves setting either a specific line number or a span value.
Syntax
The basic syntax for the grid-column property is:
grid-column: <start-line> / <end-line>;- <start-line>: The grid line where the item starts. This can be a line number, a named grid line, or a span keyword.
- <end-line>: The grid line where the item ends. Similarly, this can also be a line number, a named grid line, or use span to indicate spanning across a number of lines.
Common Usage
-
Specific Lines: Specify the starting and ending lines explicitly.
grid-column: 2 / 4;This would place the item starting from line 2 and ending before line 4.
-
Spanning Columns: Use the span keyword to define how many columns you want the item to span.
grid-column: 1 / span 2;This would start the item at line 1 and span two columns.
Issue with grid-column: 0
The value 0 is invalid for grid-column because grid lines in CSS Grid Layout are indexed starting from 1. Attempting to use 0 implies a non-existent line and therefore results in an invalid value error.
Correcting the Issue
-
Determine which grid line your item should start from and which line it should end on, using valid line numbers or span values.
-
Update your CSS to use valid grid lines:
/* Correct usage example: */ .grid-item { grid-column: 1 / span 2; }Here, the grid item starts at line 1 and spans across 2 columns.
Ensure that your grid layout is properly set up with the desired number of rows and columns so that you can appropriately set valid grid-column values.
There’s an invalid value for the grid-template-columns property. According to the CSS Grid Layout Module, the grid-template-columns property is used to define the column structure of a grid container by specifying the size of each column.
Valid values for grid-template-columns include:
- Lengths such as px, em, rem, %, vh, vw, and more (e.g., 100px).
- Fractions using the fr unit, which allocates space in fractions of the available space (e.g., 1fr 2fr).
- The repeat() function (e.g., repeat(3, 1fr)).
- Keywords like auto, min-content, max-content.
- Any combination of the above.
Here’s an example:
Incorrect CSS:
<style>
.grid-container {
display: grid;
grid-template-columns: undefined; /* This will cause an error. */
}
</style>Correct CSS:
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
/* This creates a grid with two columns, the first takes up one fraction and the second two fractions of the available space. */
}
</style>The specified value for the grid-template-rows property is not valid. This CSS property specifies the height of each row in a CSS grid layout.
Correct Usage of grid-template-rows
The grid-template-rows property accepts several types of values:
-
Length values (e.g., px, em, rem):
grid-template-rows: 100px 200px; -
Percentages:
grid-template-rows: 50% 50%; -
Flexible units (fr):
grid-template-rows: 1fr 2fr; -
Auto keyword:
grid-template-rows: auto auto; -
Repeat function:
grid-template-rows: repeat(3, 1fr); -
Minmax function:
grid-template-rows: minmax(100px, 200px) auto;
Example
Here’s an example where we define two rows, one with a height of 100px and the other one of 200px.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of grid-template-rows</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Row 1</div>
<div>Row 2</div>
</div>
</body>
</html>The value for the height property in your CSS must be a valid CSS length or percentage, or the keyword auto.
height in CSS accepts values such as px, em, rem, %, or the keyword auto. Incompatible values, like an unrecognized string or a missing unit (e.g., just height: 100;), will trigger this validation error. Always specify a valid unit unless using 0, which doesn’t require a unit, or use a percentage if the parent element has a defined height.
Correct usage examples:
<style>
.box {
height: 200px;
}
.container {
height: 70%;
}
.image {
height: auto;
}
.zero {
height: 0;
}
</style>Incorrect usage examples:
<style>
.bad {
height: 100; /* missing unit */
}
.bad2 {
height: big; /* invalid keyword */
}
</style>Always include a valid unit like px, %, em, or use auto for the height property.
A non-numeric value is set for the left CSS property, which requires a valid length or percentage.
The left property in CSS must be assigned a value that is a length (such as px, em, rem), a percentage (ending in %), or certain keywords like auto, inherit, initial, unset, or revert. Common mistakes include missing units (for example, using left: 10; instead of left: 10px;) or attempting to use invalid strings.
Invalid example:
<div style="position: absolute; left: 10;">
This will trigger a validation error.
</div>Valid example with units:
<div style="position: absolute; left: 10px;">
This is a valid use of the left property.
</div>Valid example using a percentage:
<div style="position: absolute; left: 50%;">
This will position the element halfway across the container.
</div>Valid example using a keyword:
<div style="position: absolute; left: auto;">
This uses the auto keyword for the left property.
</div>Always specify a valid unit, percentage, or keyword for the left property to ensure HTML and CSS validation.
A non-valid value is being assigned to the left CSS property.
The left property positions an element horizontally if it is positioned (relative, absolute, fixed, or sticky). Valid values include lengths (e.g. 10px), percentages (e.g. 50%), keywords like auto, or the value inherit. Using an unsupported value (such as X, an undefined variable, or a misspelled unit) will trigger this error.
Valid left property values:
- <length>: e.g., 10px, 2em
- <percentage>: e.g., 50%
- auto
- inherit
- initial
- unset
Invalid example:
<div style="position: absolute; left: none;">Invalid left value</div>Valid examples:
<div style="position: absolute; left: 20px;">20 pixels from the left</div>
<div style="position: absolute; left: 50%;">Centered horizontally</div>
<div style="position: absolute; left: auto;">Let browser decide position</div>Be sure to replace any invalid or undefined values in the left property with standards-compliant ones as above.
The CSS letter-spacing property controls the space between characters in text. The error you’re encountering indicates that an invalid value is being specified for this property. Specifically, NaNrem (where NaN stands for “Not-a-Number”) is not a valid numeric value.
Explanation
In CSS, letter-spacing can be defined using various units, such as:
- Length units like px, em, rem, etc.
- Keywords like normal.
However, these values need to be real numbers, not NaN, which indicates a computational error likely from JavaScript or during dynamic style generation.
Example of Correct Usage
If you want to set the letter spacing to a specific value, ensure it’s a valid number. For instance, to set a 0.1 rem spacing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Correct Letter Spacing</title>
<style>
.text {
letter-spacing: 0.1rem;
}
</style>
</head>
<body>
<p class="text">This is a sample text with correct letter spacing.</p>
</body>
</html>Troubleshooting Steps
-
Check the CSS Source: Look at where letter-spacing is being set in your CSS and ensure you are using a valid number.
-
Review JavaScript Calculations: If the value is coming from JavaScript, ensure that calculations do not result in NaN. This could happen if you divide by zero or use undefined variables.
// Example of avoiding NaN
let spacing = 2; // Ensure this is a valid number
document.querySelector('.text').style.letterSpacing = `${spacing}rem`;- Default Fallback: Use a conditional check or default fallback in JavaScript to prevent NaN.
let spacingValue = calculateSpacing() || 0.1; // Use 0.1 rem as fallback
document.querySelector('.text').style.letterSpacing = `${spacingValue}rem`;By resolving these issues, the error should be corrected and the text will render with proper letter-spacing settings.
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.
An invalid value is provided for the line-height CSS property.
The line-height property in CSS controls the amount of space between lines of text. Valid values for line-height include: a unitless number (relative to the font size), a length unit (such as px, em, rem), a percentage, or the keyword normal. Invalid values, such as misspelled numbers or unsupported units, will cause a validation error.
Examples of valid values:
- line-height: normal;
- line-height: 1.5;
- line-height: 24px;
- line-height: 120%;
Example of valid usage:
<p style="line-height: 1.5;">This is text with a valid line-height value.</p>HTML document with correct inline style:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid line-height Example</title>
</head>
<body>
<p style="line-height: 2;">A paragraph with valid line-height.</p>
</body>
</html>mask-image only accepts specific values such as none, a valid <image>, or a supported CSS gradient value.
The mask-image CSS property is used to specify an image to use as a mask layer for an element. Acceptable values for mask-image are none, a supported URL (using url()), or a CSS gradient (such as linear-gradient() or radial-gradient()). Passing an invalid value (like a random string or unsupported function) will trigger a validation error.
Common mistakes include:
- Typing errors in the value
- Using unsupported keywords or formats
- Forgetting to wrap URLs in url()
Examples of correct usage:
<div style="mask-image: none;">
<!-- Masking is disabled -->
</div><div style="mask-image: url('mask.png');">
<!-- Uses an external image as a mask -->
</div><div style="mask-image: linear-gradient(to right, transparent, black);">
<!-- Uses a CSS gradient as a mask -->
</div>Always use a valid image, gradient, or none as the value for mask-image to resolve the validator issue.
The CSS property padding-right is used to set the padding space on the right side of an element. According to the CSS specification, padding values must be non-negative, meaning that negative values are not allowed for any of the padding properties.
To resolve the issue, remove the negative value. If you are trying to adjust the layout or spacing, consider using other CSS properties that allow negative values, such as margin. Here’s how you can fix this:
Example Before Fix
.example {
padding-right: -9px; /* This is incorrect */
}Example After Fix
.example {
padding-right: 0; /* Set to zero or a positive value */
/* If adjustment is needed, consider using margin */
margin-right: -9px;
}Explanation:
- Padding: The padding-right property specifies the space between the content of the element and its border on the right side. This space cannot be negative.
- Margin: If you’re trying to create an overlapping effect or reduce space externally, using margin-right with a negative value is permissible.
Evaluate the layout requirements and adjust the values appropriately, ensuring you respect the non-negative rule of padding properties.
The text-align property in CSS only accepts specific keywords such as left, right, center, justify, start, or end.
W3C validation errors like this occur when an unsupported value is used for the text-align property. Valid values for text-align are standard keywords or certain global values. Custom or invalid values (like middle, or arbitrary text) are not permitted and will trigger validation errors.
Valid examples of text-align:
<p style="text-align: left;">This text is left-aligned.</p>
<p style="text-align: right;">This text is right-aligned.</p>
<p style="text-align: center;">This text is centered.</p>
<p style="text-align: justify;">This text is justified.</p>Invalid example:
<p style="text-align: middle;">This will fail validation.</p>To resolve the issue, always use a valid keyword for text-align.
Change the transition-delay value from 0 to 0s to specify a time unit.
CSS properties dealing with time, like transition-delay, require a time unit to be compliant with standards. The transition-delay property specifies when the transition effect will start after being triggered. Valid values for transition-delay include time values such as 100ms (milliseconds) or 0s (seconds). Specifying just 0 is not compliant because it lacks a time unit, which is why the validator flags this as an error.
Here is an example of how to correctly define transition-delay using proper time units in your CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Delay Example</title>
<style>
.example {
transition-delay: 0s; /* Correctly includes time unit */
transition-property: opacity;
transition-duration: 1s;
opacity: 0;
}
.example:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="example">Hover over me!</div>
</body>
</html>In this corrected example, the transition-delay is set to 0s, ensuring compliance with CSS standards by including the necessary time unit.
The value none is not a valid value for the vertical-align CSS property.
The vertical-align property in CSS is used to specify the vertical alignment of an inline or table-cell element. This property affects the alignment of elements that are placed next to each other in a line. Valid values for vertical-align include keywords like baseline, sub, super, text-top, text-bottom, middle, top, bottom, as well as length values (such as px, em) and percentage values. The value none is not recognized as a valid option for vertical-align, which is why the validator reports an issue.
Below are examples using valid values for the vertical-align property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Vertical Align</title>
<style>
.aligned-text {
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr>
<td style="vertical-align: top;">Top</td>
<td class="aligned-text">Middle</td>
<td style="vertical-align: bottom;">Bottom</td>
</tr>
</table>
</body>
</html>In the above example, each table cell is using a valid vertical-align value (top, middle, and bottom) to control vertical alignment. If you replace vertical-align: none; with one of these values according to your design requirements, your code will validate correctly.