HTML Guide

The error you encountered indicates that the value none is not a valid value for the border-radius CSS property. The border-radius property expects a length value (like px, em, etc.), or keywords that define its radius, such as 0 or inherit.

How to Fix It

• Use a Valid Value: If you want no border radius, use 0 instead of none.
• Specify a Length: If you want rounded borders, specify a valid length value (e.g., 5px, 1em).

Examples

Incorrect Usage

This is the incorrect way that leads to the validation error:

<style>
  .example {
    border-radius: none; /* Invalid value */
  }
</style>

Correct Usage

Here are correct alternatives:

Option 1: No Border Radius

<style>
  .example {
    border-radius: 0; /* Valid value for no rounded corners */
  }
</style>

Option 2: Specify a Border Radius

<style>
  .example {
    border-radius: 5px; /* Valid value for rounded corners */
  }
</style>

Conclusion

Replace border-radius: none; with either border-radius: 0; for no rounded corners or an appropriate pixel/em value for adding rounded corners. This will resolve the W3C Validator issue and ensure your CSS is compliant with the standards.

This W3C Validator issue indicates that the value assigned to the CSS border property is invalid. The border property in CSS is used to specify the width, style, and color of an element’s border, and these values must be appropriately defined.

To resolve this issue, make sure you define the border property using valid values for border width, border style, and border color. Below is the correct syntax for setting a border:

selector {
  border: 1px solid black; /* width, style, color */
}

If you inadvertently set the border property to an incorrect or undefined value, such as undefined, it will trigger this validation issue.

Incorrect Example:

<div style="border: undefined;"></div> <!-- This will cause a validation error -->

Correct Example:

To correct this, replace undefined with a valid CSS border definition. For example:

<div style="border: 1px solid black;"></div>

Breakdown:

• 1px is the border width.
• solid is the border style.
• black is the border color.

More Examples:

Here are a few more valid examples with different border styles:

• Dotted border:

  <div style="border: 2px dotted red;"></div>

• Dashed border:

  <div style="border: 3px dashed blue;"></div>

• Double border:

  <div style="border: 4px double green;"></div>

Additionally, you can define border properties separately:

selector {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Summary:

Ensure your border property has valid width, style, and color values. Avoid using placeholders like undefined in your CSS properties. This will resolve the W3C Validator issue and render your border as expected in your HTML document.

The color property in CSS expects a valid color value. Valid color values include keywords (such as red or blue), hexadecimal values (such as #FFFFFF), RGB values (such as rgb(255, 255, 255)), and others.

Example Fix

Invalid CSS

The following snippet is invalid because 0 is not a valid color value:

<style>
  .example {
    color: 0;
  }
</style>

Valid CSS

To fix it, use a valid color value. Below are examples using different types of color values:

Color Keyword

<style>
  .example {
    color: black;
  }
</style>

Hexadecimal Color

<style>
  .example {
    color: #000000;
  }
</style>

RGB Color

<style>
  .example {
    color: rgb(0, 0, 0);
  }
</style>

RGBA Color

<style>
  .example {
    color: rgba(0, 0, 0, 0.5);
  }
</style>

The hexadecimal value for the color CSS property is not valid. It needs to have either 3 or 6 hexadecimal digits.

The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.

This property accepts colors in different formats, one of them being hexadecimal values. For example a pure red color can be expressed either with 3 hexadecimal digits or 6 hexadecimal digits:

color: #F00;
color: #FF0000;

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.

The value on the display property is not valid.

The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.

The specified CSS filter is not a standard one, and may only work in some browsers.

font-display isn’t a CSS property, it’s a descriptor for use with the @font-face at-rule.

The value passed to the font-size property is invalid, probably missing the amount of px.

The font-size CSS property sets the size of the font, and this size can be expressed in different units, like em, % or px.

Example:

<!DOCTYPE html>
<html>
<head>
	<title>Font-size Example</title>
	<style>
		p {
			font-size: 16px;
		}
	</style>
</head>
<body>
	<p>This is an example of a paragraph with a font-size of 16px.</p>
</body>
</html>

This issue is a false positive by the W3C validator, fixed in the latest versions of Nu Validator.

The value revert is indeed a valid value for the CSS property font-size.

The font-stretch property in CSS defines the relative width of the font, and is used to make the text narrower or wider. The value bold is not a valid value for font-stretch. Instead, you should use the font-weight property to set the boldness of the font.

Here’s an example of how to use the font-weight property to set the text to bold:

<p style="font-weight: bold;">This text is bold.</p>

Alternatively, you can use a CSS stylesheet to apply the font-weight property to multiple elements:

<style>
  p { font-weight: bold; }
  h1 { font-weight: bolder; }
</style>

<p>This text is bold.</p>
<h1>This heading is even bolder.</h1>

The CSS font-style property is used to set the style of the font, such as normal, italic, or oblique. The value bold is not a valid value for font-style. Instead, you should use the font-weight property to set the boldness of the font. The valid values for font-weight are normal, bold, bolder, and lighter.

Here’s an example of how to use the font-weight property to set the text to bold:

<p style="font-weight: bold;">This text is bold.</p>

Alternatively, you can use a CSS stylesheet to apply the font-weight property to multiple elements:

<style>
  p { font-weight: bold; }
  h1 { font-weight: bolder; }
</style>

<p>This text is bold.</p>
<h1>This heading is even bolder.</h1>

The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.

Here are examples of valid font-style values:

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

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

A common issue is trying to use font-style to define the size, when font-size should have been used instead, for example:

/* Invalid */
font-style: 1.2em;

/* Valid */
font-size: 1.2em;

The W3C Validator error “CSS: “font-weight”: “X” is not a “font-weight” value” indicates that an incorrect value has been assigned to the font-weight CSS property. The font-weight property controls the boldness or weight of the font, but it only accepts specific values, not a measurement like pixels.

Accepted Values for font-weight:

1. Keywords: normal, bold, bolder, lighter.
2. Numeric Values: 100, 200, 300, 400 (equivalent to normal), 500, 600, 700 (equivalent to bold), 800, 900.

Fixing the Issue:

You need to replace the incorrect value with one of the accepted values for font-weight.

Incorrect CSS:

p {
    font-weight: 20px; /* Invalid value */
}

Corrected CSS:

If you want to use a lighter weight, you can choose one of the valid numeric values.

• For a thin font weight:

  p {
    font-weight: 100; /* Thin weight */
  }

• For normal (default) font weight:

  p {
    font-weight: 400; /* Normal weight */
  }

• For bold font weight:

  p {
    font-weight: bold; /* Bold keyword */
  }

Example in HTML:

Here’s how you might use the corrected font-weight property in a simple HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Corrected font-weight values */
        .thin {
            font-weight: 100;
        }
        .normal {
            font-weight: 400;
        }
        .bold {
            font-weight: bold;
        }
    </style>
    <title>Font Weight Example</title>
</head>
<body>
    <p class="thin">This is thin font weight.</p>
    <p class="normal">This is normal font weight.</p>
    <p class="bold">This is bold font weight.</p>
</body>
</html>

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

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.

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;
}