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 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;This error typically occurs when there is a syntax issue in the CSS code for the background-color property in your HTML or CSS file. The error message indicates that there is an unexpected semicolon (;) after the # symbol, which is commonly used to define hexadecimal color values.
Here is a step-by-step guide to fix this issue:
-
Locate the Error:
- Look for the line and column in your code as specified by the validator. This is where the error is occurring.
-
Identify the Issue:
- Check the background-color property at that location. It’s likely that you have a semicolon directly after the # or an invalid color value.
-
Correct the Syntax:
- Ensure that the background-color property is followed by a valid hexadecimal color value, an RGB/RGBA value, an HSL/HSLA value, or a predefined color keyword.
Example of Error
Let’s say you have the following erroneous CSS code:
body {
background-color: #; /* Incorrect */
}The above code is incorrect because #; is not a valid color value.
Corrected Example
Here’s how to fix it by providing a valid hexadecimal color value:
body {
background-color: #ffffff; /* Correct: Hexadecimal color for white */
}Alternatively, you can also use other color formats or color keywords. Examples:
body {
background-color: rgb(255, 255, 255); /* RGB color */
}
body {
background-color: rgba(255, 255, 255, 1); /* RGBA color */
}
body {
background-color: hsl(0, 0%, 100%); /* HSL color */
}
body {
background-color: hsla(0, 0%, 100%, 1); /* HSLA color */
}
body {
background-color: white; /* Predefined color keyword */
}The background-color property in CSS expects a valid color value. Valid color values include keywords (such as red or blue), hexadecimal values (such as #FFFFFF), RGB values (such as rgb(255, 255, 255)), and others.
Example Fix
Invalid CSS
The following snippet is invalid because 0 is not a valid color value:
<style>
.example {
background-color: 0;
}
</style>Valid CSS
To fix it, use a valid color value. Below are examples using different types of color values:
Color Keyword
<style>
.example {
background-color: black;
}
</style>Hexadecimal Color
<style>
.example {
background-color: #000000;
}
</style>RGB Color
<style>
.example {
background-color: rgb(0, 0, 0);
}
</style>RGBA Color
<style>
.example {
background-color: rgba(0, 0, 0, 0.5);
}
</style>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 border-color property in CSS expects a valid color value. Valid color values include keywords (such as red or blue), hexadecimal values (such as #FFFFFF), RGB values (such as rgb(255, 255, 255)), and others.
Example Fix
Invalid CSS
The following snippet is invalid because 0 is not a valid color value:
<style>
.example {
border-color: 0;
}
</style>Valid CSS
To fix it, use a valid color value. Below are examples using different types of color values:
Color Keyword
<style>
.example {
border-color: black;
}
</style>Hexadecimal Color
<style>
.example {
border-color: #000000;
}
</style>RGB Color
<style>
.example {
border-color: rgb(0, 0, 0);
}
</style>RGBA Color
<style>
.example {
border-color: rgba(0, 0, 0, 0.5);
}
</style>The error you encountered indicates that the value none is not a valid value for the border-radius CSS property. The border-radius property expects a length value (like px, em, etc.), or keywords that define its radius, such as 0 or inherit.
How to Fix It
- Use a Valid Value: If you want no border radius, use 0 instead of none.
- Specify a Length: If you want rounded borders, specify a valid length value (e.g., 5px, 1em).
Examples
Incorrect Usage
This is the incorrect way that leads to the validation error:
<style>
.example {
border-radius: none; /* Invalid value */
}
</style>Correct Usage
Here are correct alternatives:
Option 1: No Border Radius
<style>
.example {
border-radius: 0; /* Valid value for no rounded corners */
}
</style>Option 2: Specify a Border Radius
<style>
.example {
border-radius: 5px; /* Valid value for rounded corners */
}
</style>Conclusion
Replace border-radius: none; with either border-radius: 0; for no rounded corners or an appropriate pixel/em value for adding rounded corners. This will resolve the W3C Validator issue and ensure your CSS is compliant with the standards.
This W3C Validator issue indicates that the value assigned to the CSS border property is invalid. The border property in CSS is used to specify the width, style, and color of an element’s border, and these values must be appropriately defined.
To resolve this issue, make sure you define the border property using valid values for border width, border style, and border color. Below is the correct syntax for setting a border:
selector {
border: 1px solid black; /* width, style, color */
}If you inadvertently set the border property to an incorrect or undefined value, such as undefined, it will trigger this validation issue.
Incorrect Example:
<div style="border: undefined;"></div> <!-- This will cause a validation error -->Correct Example:
To correct this, replace undefined with a valid CSS border definition. For example:
<div style="border: 1px solid black;"></div>Breakdown:
- 1px is the border width.
- solid is the border style.
- black is the border color.
More Examples:
Here are a few more valid examples with different border styles:
-
Dotted border:
<div style="border: 2px dotted red;"></div> -
Dashed border:
<div style="border: 3px dashed blue;"></div> -
Double border:
<div style="border: 4px double green;"></div>
Additionally, you can define border properties separately:
selector {
border-width: 1px;
border-style: solid;
border-color: black;
}Summary:
Ensure your border property has valid width, style, and color values. Avoid using placeholders like undefined in your CSS properties. This will resolve the W3C Validator issue and render your border as expected in your HTML document.
The color property in CSS expects a valid color value. Valid color values include keywords (such as red or blue), hexadecimal values (such as #FFFFFF), RGB values (such as rgb(255, 255, 255)), and others.
Example Fix
Invalid CSS
The following snippet is invalid because 0 is not a valid color value:
<style>
.example {
color: 0;
}
</style>Valid CSS
To fix it, use a valid color value. Below are examples using different types of color values:
Color Keyword
<style>
.example {
color: black;
}
</style>Hexadecimal Color
<style>
.example {
color: #000000;
}
</style>RGB Color
<style>
.example {
color: rgb(0, 0, 0);
}
</style>RGBA Color
<style>
.example {
color: rgba(0, 0, 0, 0.5);
}
</style>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 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 height property in your CSS containing invalid or too many values. The height property should have only one valid length, percentage, or keyword value.
Valid Values for height Property:
- Length values: px, em, rem, etc. (e.g., 100px, 10em)
- Percentage values: (e.g., 50%)
- Keyword values: auto, max-content, min-content, fit-content, inherit, initial, unset
Example of Incorrect Usage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
height: 100px 50px; /* Incorrect: Too many values */
}
</style>
<title>Height Property Example</title>
</head>
<body>
<div class="example">Content</div>
</body>
</html>Example of Correct Usage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
height: 100px; /* Correct: One valid value */
}
</style>
<title>Height Property Example</title>
</head>
<body>
<div class="example">Content</div>
</body>
</html>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.