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;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:
- Keywords: normal, bold, bolder, lighter.
- 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 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:
- Length values: px, em, rem, etc. (e.g., 100px, 10em)
- Percentage values: (e.g., 50%)
- 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 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>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.
The CSS property padding-block does not accept auto as a value. The padding-block property is used to set the padding on the block-level start and end sides of an element, and it expects length values (like px, em, %, etc.) or global values like inherit, initial, revert, revert-layer, unset.
Here’s how you can fix this issue by providing valid values for the padding-block property.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Padding Block Example</title>
<style>
.example {
/* Incorrect use of 'auto' */
/* padding-block: auto; */
/* Correct use of padding-block with length values: */
padding-block: 20px 10px;
/* You can also use single value for same padding on both sides: */
/* padding-block: 15px; */
/* Or use percentage values: */
/* padding-block: 2% 1%; */
/* Or inherit, initial, revert, unset */
/* padding-block: inherit; */
}
</style>
</head>
<body>
<div class="example">
This is an example demonstrating correct use of padding-block.
</div>
</body>
</html>Explanation:
-
Length values: You can specify the padding using absolute units like px, em, rem, etc. In the example above, padding-block: 20px 10px; applies 20px padding to the block-start and 10px to the block-end.
-
Single Length Value: Using padding-block: 15px; applies the same padding (15px) to both block-start and block-end.
-
Percentage values: padding-block: 2% 1%; will apply 2% of the containing block’s size to block-start and 1% to block-end.
-
Global values: You can also use inherit, initial, revert, revert-layer, or unset to control CSS inheritance and initial values.
The padding-bottom property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-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="padding-bottom: px;">Content</div>Corrected HTML with inline CSS:
<div style="padding-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 {
padding-bottom: px;
}Correct the external CSS by specifying a numerical value:
.example {
padding-bottom: 10px;
}