HTML Guide for css
The value break-word for the property word-break is deprecated, you should replace it with a valid value.
According to the CSS Text Module Level 3 spec:
For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.
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.
An unknown CSS pseudo-class or pseudo-element selector is being used.
Validators report this when a selector uses a pseudo-class or pseudo-element not recognized by the chosen CSS profile (e.g., CSS Level 2.1), is misspelled, uses the wrong syntax (single vs double colon), or is behind a vendor prefix or future spec.
Use supported selectors, correct typos, use double colon for pseudo-elements like ::before and ::after, and ensure the validator profile supports modern CSS.
For experimental or vendor-prefixed selectors, consider removing them for validation, adding fallbacks, or switching the validator’s profile to a newer level.
Examples of valid pseudo-classes: :hover, :focus, :active, :focus-visible, :has() (modern). Pseudo-elements should use double colons: ::before, ::after, ::marker, ::placeholder. Vendor-prefixed selectors (e.g., ::-webkit-input-placeholder) may be flagged; provide a standards-based ::placeholder alongside them.
HTML Examples
Example showing the issue
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invalid CSS Example</title>
<style>
/* Typo and wrong colon usage */
a:hovr { color: red; }
p:before { content: "Hi "; }
/* Vendor-specific pseudo-element without standard fallback */
input::-webkit-input-placeholder { color: gray; }
/* Newer selector not supported by older profiles */
.card:has(img) { border: 1px solid #ccc; }
</style>
</head>
<body>
<a href="#">Link</a>
<p>Text</p>
<input placeholder="Your name">
</body>
</html>Fixed, validator-friendly CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fixed CSS Example</title>
<style>
/* Correct pseudo-class */
a:hover { color: red; }
/* Use double colon for pseudo-elements */
p::before { content: "Hi "; }
/* Standards-based pseudo-element with optional vendor prefix */
input::placeholder { color: gray; }
/* Optional: keep vendor prefix for browser support, may still warn */
/* input::-webkit-input-placeholder { color: gray; } */
/* If :has() causes warnings, consider a fallback or remove for validation */
/* .card:has(img) { border: 1px solid #ccc; } */
</style>
</head>
<body>
<a href="#">Link</a>
<p>Text</p>
<input placeholder="Your name">
</body>
</html>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>