HTML Guide for css
The <table> element does not accept a height attribute. Use CSS instead.
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 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;
A CSS definition for background-image could not be understood by the parser. Check its definition to ensure that it’s well formed and that it contains an appropriate value.
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 @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 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 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 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 padding CSS shorthand property sets the padding area on all four sides of an element at once.
To specify no padding, use padding: 0 instead of padding: none.
Padding properties, unline margin properties, don’t accept negative values.
CSS styles could not be parsed, check the indicated line to find what caused the parser to fail. Common causes are unclosed curly brackets or comments, missing semicolons or unexpected or empty properties.
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis, or display a custom string.
This property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line.
Here are some examples:
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";
/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
The text-transform CSS property specifies how to capitalize an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
Examples of valid values for this property are:
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;