HTML Guide
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;
Learn more:
Related W3C validator issues
The <table> element does not accept a height attribute. Use CSS instead.
To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).
In the following example, this media query expresses that the style sheet is only linked if the width of the viewport 768px maximum:
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="styles.css">
To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).
In the following example, this media query expresses that the style sheet is only linked if the width of the viewport is greater than 768px:
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="styles.css">
The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element’s box. This means that even if the parent container or viewport size changes, the browser will adjust the element’s dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.
The box’s preferred aspect ratio is the specified ratio of width / height. If height and the preceding slash character are omitted, height defaults to 1.
Here are some examples of this property:
aspect-ratio: 1 / 1;
aspect-ratio: 1;
/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;
A CSS definition for background-image could not be understood by the parser. Check its definition to ensure that it’s well formed and that it contains an appropriate value.
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 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>