HTML Guide for css

The value specified for the transform CSS attribute is not valid.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

To fix this issue, check the syntax for the transform that you want to apply.

Here are some examples of valid values for this property:

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

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

The ::file-selector-button has not been recognized by the W3C Validator. This seems to be a bug in the W3C Validator, which has already been reported.

The ::ng-deep CSS selector is often used in an Angular Component’s CSS to override the styles of a third-party component or a child component’s styles.

This CSS selector is now deprecated.

The @container CSS at-rule is a conditional group rule that applies styles to a containment context. The @container at-rule is a recent addition to CSS which isn’t officially a standard rule instead, although widely supported by major browsers.

Check the linked guides to learn more about browser compatibility for this rule.

The @tailwind at-rule defined by the Tailwind CSS framework isn’t officialy supported by the W3C Validator.

Tailwind directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects.

Although they’re valid directives for Tailwind, they’re not valid from the W3C Validator perspective. You can consider muting this issue in your Rocket Validator Pro reports.

The value specified for a width attribute in CSS is not valid.

The width CSS property sets an element’s width. There are many allowed values for this attribute, for example:

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

/* Global values */
width: inherit;
width: initial;
width: revert;
width: unset;

CSS can’t be properly processed because a computed style is missing a value it depends on.

CSS properties need to be separated by semicolons. Check for the missing semicolon between properties.

In the example below, a forgotten semicolon before the content property makes the CSS parser unable to understand the properties:

<style>
nice {
  z-index: auto 
  content: ""; 
  display: block; 
}
</style>

Fix it by including the forgotten semicolon like this:

<style>
nice {
  z-index: auto;
  content: ""; 
  display: block; 
}
</style>

A CSS property in your HTML includes a calculation or expression where a required numerical value is missing.

This usually happens with properties that use functions like calc(), or arithmetic within CSS, where one of the operands is missing or not a valid number. Common cases include missing units or entirely omitting a value around operators like +, -, *, /.

For example, the following is invalid:

<div style="width: calc(100% - );"></div>

Here, the value after - is missing, so the validator cannot process a non-existent number. Every side of an operator in calc() must be a valid number with possible units.

Correct usage:

<div style="width: calc(100% - 50px);"></div>

Double-check all inline style attributes and your CSS files for incomplete calc() expressions, arithmetic operations, or similar syntax issues, and make sure every operand around an operator is a valid number (with units if required).

A CSS definition for an X property could not be understood by the parser. Check it to ensure that it’s well formed and that it contains an appropriate value.

The specified CSS property is not valid.

A CSS validation error about “Too many values or values are not recognized” indicates that a CSS property in your HTML uses an invalid or unsupported value, or has more values than expected.

CSS properties have strict rules regarding which values and how many values they accept. Using an unsupported keyword, a typo, or an extra value will result in validation errors. For example, the color property only accepts valid color values (like red, #f00, rgb(255,0,0)), but not unrelated keywords. Similarly, margin can accept one to four length or percentage values, but adding a fifth value or invalid text will cause an error.

Example of INVALID CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Invalid CSS Example</title>
    <style>
      p {
        color: red blue;      /* Too many values */
        margin: 10px 20px 5px 0px 15px; /* Too many values */
        display: blocky;      /* Unrecognized value */
      }
    </style>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Example of VALID CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Valid CSS Example</title>
    <style>
      p {
        color: red;
        margin: 10px 20px 5px 0px;
        display: block;
      }
    </style>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Check each CSS property for correct spelling, valid values, and valid value count.

The value specified in a custom CSS property has an unknown or unsupported dimension value.

When specifying a numeric value for a CSS property, remember to always include the units, like 3px or 3em. Only the 0 value can go without units, and instead of 0px you can just use 0.

<td> elements no longer accept an align attribute. This can be achieved using CSS like this:

<td style="text-align:center;">content</td>

The <big> tag is now obsolete. It was used to increase the size of text, you can do that using CSS instead. For example:

<p>Now this is <span style="font-size: larger;">big</span></p>

<img> tags no longer accept a border attribute. This can be defined using CSS instead, for example:

<img src="..." alt="..." style="border:0;" />

The <center> tag is no longer valid in HTML, you should use CSS instead, for example:

<p style="text-align:center">this text will be centered</p>

The <font> element, used to define the font face, size and color in previous versions of HTML, is no longer valid in HTML5. Instead, you should rely on CSS styles.

For example, you can define a font size of 12px, bold text with inline styles like this:

<p style="font-size: 12px; font-weight: bold;">some text</p>

The <tt> tag, used in HTML4 to apply a monospaced (fixed width) font to the text, was deprecated in HTML5. Instead, you should use CSS to apply the desired font.

Example, instead of this deprecated code:

<tt>This is deprecated</tt>

You can define a monospaced text using font-family:

<span style="font-family: monospace;">This is monospaced text</span>

The HTML <style> element contains style information for a document, or part of a document, defined in CSS. This element does not need the type attribute anymore, so it should be omitted.

For example, this style defines that <p> elements should be in red color.

<style type="text/css">
p {
  color: red;
}
</style>
<p>This text will be red.</p>

But, the type attribute is not used anymore, so we can just use this:

<style>
p {
  color: red;
}
</style>
<p>This text will be red.</p>

<td> elements no longer accept a valign attribute. This can be achieved using CSS like this:

<td style="vertical-align:middle;">content</td>

Both <table> and <td> elements no longer accept a width attribute. Instead, you should use CSS as in this example:

<table style="width:100%;">
  <tr>
    <td style="width:50px;">Name</td>
  </tr>
</table>

You’re using an attribute X that is no longer valid for element Y, but you can use CSS to achieve the same effect.