HTML Guide
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>Learn more:
Related W3C validator issues
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 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 <table> element does not accept a height attribute. Use CSS instead.
The attribute font-weight can be used on SVG text elements like text but not on g container elements, and none is not a valid value.
The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.
This attribute can be used with the SVG elements text, textPath, tref and tspan, but on on g elements.
Its allowed values are normal, bold, bolder, lighter, or a number. The value none is not valid for this attribute.
Here’s an example:
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
<text y="20" font-weight="normal">Normal text</text>
<text x="100" y="20" font-weight="bold">Bold text</text>
</svg>Alternatively, SVG text elements can also be stilyzed using CSS, like so:
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
<text y="20" style="font-weight:normal">Normal text</text>
<text x="100" y="20" style="font-weight:bold">Bold text</text>
</svg>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 sizes attribute for an img element requires valid CSS syntax, and auto is not an acceptable value within that attribute.
The sizes attribute allows you to specify a list of media conditions and corresponding sizes for the images. Each condition determines which size of the image should be displayed at different viewport widths, ensuring responsive image delivery. The syntax for sizes should be a comma-separated list of media queries followed by a value denoting the corresponding width of the image. This width value may be in pixels (px) or as a percentage (vw, vh), but auto is not valid in this context.
Here is a breakdown of a correct sizes attribute usage:
- 50vw: This denotes that the image should take up 50% of the viewport’s width.
- (max-width: 600px) 100vw, 50vw: When the viewport is at most 600 pixels wide, the image should occupy the full width (100vw). Otherwise, it should take 50 percent of the viewport width.
Remove “auto” from your sizes value and provide a valid, contextually correct CSS value.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Images Example</title>
</head>
<body>
<img
src="image.jpg"
sizes="(max-width: 472px) 100vw, 472px"
srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1000w"
alt="A description of the image"
>
</body>
</html>In this example, if the viewport width is less than or equal to 472 pixels, the image will take up the entire width (100vw). For larger widths, the srcset specifies different image files for varying resolutions.
The issue you’re encountering indicates that the CSS property align-items is being set to a value of auto, which is not a valid value for this property according to the CSS specification. The align-items property is used in flexbox and grid layouts to define how items are aligned along the cross axis.
Fixing the Issue:
-
Understand Valid Values: The valid values for the align-items property include:
/* Basic keywords */ align-items: normal; align-items: stretch; /* Positional alignment */ /* align-items does not take left and right values */ align-items: center; align-items: start; align-items: end; align-items: flex-start; align-items: flex-end; align-items: self-start; align-items: self-end; align-items: anchor-center; /* Baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* Overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* Global values */ align-items: inherit; align-items: initial; align-items: revert; align-items: revert-layer; align-items: unset; -
Choose a Correct Value: Based on the desired alignment, choose one of the valid values. For instance:
- Use flex-start to align items to the start of the container.
- Use center to align items in the center.
- Use stretch to stretch items to fill the container.
-
Example Correction: If your original CSS was:
.container { display: flex; align-items: auto; /* This is invalid */ }You could change it to:
.container { display: flex; align-items: center; /* This is valid */ }
Conclusion:
Replace the invalid auto value with a valid option that suits the design you aim for, making sure to test the layout after applying changes to confirm that the items align as intended.
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;