HTML Guide

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

1. 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.

2. 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

1. Determine which grid line your item should start from and which line it should end on, using valid line numbers or span values.

2. 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:

1. Length values (e.g., px, em, rem):

   grid-template-rows: 100px 200px;

2. Percentages:

   grid-template-rows: 50% 50%;

3. Flexible units (fr):

   grid-template-rows: 1fr 2fr;

4. Auto keyword:

   grid-template-rows: auto auto;

5. Repeat function:

   grid-template-rows: repeat(3, 1fr);

6. 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.

The height property in your CSS containing invalid or too many values. The height property should have only one valid length, percentage, or keyword value.

Valid Values for height Property:

1. Length values: px, em, rem, etc. (e.g., 100px, 10em)
2. Percentage values: (e.g., 50%)
3. Keyword values: auto, max-content, min-content, fit-content, inherit, initial, unset

Example of Incorrect Usage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .example {
      height: 100px 50px; /* Incorrect: Too many values */
    }
  </style>
  <title>Height Property Example</title>
</head>
<body>
  <div class="example">Content</div>
</body>
</html>

Example of Correct Usage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .example {
      height: 100px; /* Correct: One valid value */
    }
  </style>
  <title>Height Property Example</title>
</head>
<body>
  <div class="example">Content</div>
</body>
</html>

The @import CSS rule can be used to import a style sheet into another style sheet. It must appear at the top of the document, and after any @charset declaration.

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

1. Check the CSS Source: Look at where letter-spacing is being set in your CSS and ensure you are using a valid number.

2. 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`;

3. 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>

The margin-bottom property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting margin-bottom: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="margin-bottom: px;">Content</div>

Corrected HTML with inline CSS:

<div style="margin-bottom: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  margin-bottom: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  margin-bottom: 10px;
}

The margin-left property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting margin-left: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="margin-left: px;">Content</div>

Corrected HTML with inline CSS:

<div style="margin-left: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  margin-left: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  margin-left: 10px;
}

The margin property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting margin: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="margin: px;">Content</div>

Corrected HTML with inline CSS:

<div style="margin: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  margin: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  margin: 10px;
}

The margin-right property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting margin-right: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="margin-right: px;">Content</div>

Corrected HTML with inline CSS:

<div style="margin-right: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  margin-right: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  margin-right: 10px;
}

The value specified for a margin attribute in CSS is not valid.

The margin CSS property sets sets the margin area on all four sides of an element. There are many allowed values for this attribute, for example:

/* Apply to all four sides */
margin: 1em;
margin: -3px;

/* top and bottom | left and right */
margin: 5% auto;

/* top | left and right | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* Global values */
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
margin: unset;

The margin-top property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting margin-top: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="margin-top: px;">Content</div>

Corrected HTML with inline CSS:

<div style="margin-top: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  margin-top: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  margin-top: 10px;
}

The value specified for the margin CSS attribute is not valid, probably because it’s enclosed in quotes.

The margin CSS property defines the margin for the four sides of the element. There are several ways to specify this value, as in the following examples:

/* Apply to all four sides */
margin: 1em;
margin: -3px;

/* top and bottom | left and right */
margin: 5% auto;

/* top | left and right | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* Global values */
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
margin: unset;

In all those cases the value does not need to be specified using quotes, so the following code may raise an issue:

<style>
  .marginalized {margin: "0 0 1em 0"}
</style>

In order to fix this issue you should remove the quotes, like in the following example:

<style>
  .marginalized {margin: 0 0 1em 0}
</style>

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 specified CSS mask has incorrect or unrecognized values. Ensure that the mask property is used correctly according to the CSS specifications.

The mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

For example, the mask-image CSS property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element, as in thie example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <style>
  .masked {
    width: 100px;
    height: 100px;
    background-color: #8cffb0;
    -webkit-mask-image: url(sun.svg);
    mask-image: url(sun.svg);
  }
  </style>
</head>
<body>
  <div class="masked"></div>
</body>
</html>

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

This property can express a value in different units like px, em, % or ch, and keyword values, but auto is not an allowed value.

Some examples of valid values for max-width:

/* <length> value */
max-width: 3.5em;

/* <percentage> value */
max-width: 75%;

/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(20em);

/* Global values */
max-width: inherit;
max-width: initial;
max-width: revert;
max-width: unset;

The value specified for the min-height CSS attribute is not valid.

An invalid CSS property is being used. Properties starting with mso- are commonly defined by Microsoft products like Office and Outlook.

These properties, like mso-spacerun, mso-fareast-font-family, mso-bidi-font-weight, mso-margin-bottom-alt, mso-margin-top-alt and others starting with mso- are not standard CSS properties.