HTML Validation

CSS: “font-style”: “bold” is not a “font-style” value.

About This HTML Issue

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:

→ MDN: font-style
→ MDN: font-weight

Last reviewed: May 30, 2023

Was this guide helpful?

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Related W3C Validator Issues

Bad value X for attribute “media” on element “link”: Deprecated media feature “max-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

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

Bad value X for attribute “media” on element “link”: Deprecated media feature “min-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

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

CSS: “mso-X”: Property “mso-X” doesn't exist.

Attribute “height” not allowed on element “table” at this point.

Bad value X for attribute “sizes” on element “img”: Bad CSS number token: Expected a minus sign or a digit but saw “a” instead at “auto,”.

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.

Ready to validate your sites?
Start your free trial today.

Pro Trial Free Trial