HTML Guide for css

The margin-left property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting margin-left: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="margin-left: px;">Content</div>

Corrected HTML with inline CSS:

<div style="margin-left: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  margin-left: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  margin-left: 10px;
}

The margin property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting margin: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="margin: px;">Content</div>

Corrected HTML with inline CSS:

<div style="margin: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  margin: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  margin: 10px;
}

The margin-right property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting margin-right: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="margin-right: px;">Content</div>

Corrected HTML with inline CSS:

<div style="margin-right: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  margin-right: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  margin-right: 10px;
}

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 margin-top property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting margin-top: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="margin-top: px;">Content</div>

Corrected HTML with inline CSS:

<div style="margin-top: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  margin-top: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  margin-top: 10px;
}

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 specified CSS mask has incorrect or unrecognized values. Ensure that the mask property is used correctly according to the CSS specifications.

The mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

For example, the mask-image CSS property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element, as in thie example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <style>
  .masked {
    width: 100px;
    height: 100px;
    background-color: #8cffb0;
    -webkit-mask-image: url(sun.svg);
    mask-image: url(sun.svg);
  }
  </style>
</head>
<body>
  <div class="masked"></div>
</body>
</html>

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 CSS property padding-block does not accept auto as a value. The padding-block property is used to set the padding on the block-level start and end sides of an element, and it expects length values (like px, em, %, etc.) or global values like inherit, initial, revert, revert-layer, unset.

Here’s how you can fix this issue by providing valid values for the padding-block property.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Padding Block Example</title>
  <style>
    .example {
      /* Incorrect use of 'auto' */
      /* padding-block: auto; */

      /* Correct use of padding-block with length values: */
      padding-block: 20px 10px;

      /* You can also use single value for same padding on both sides: */
      /* padding-block: 15px; */

      /* Or use percentage values: */
      /* padding-block: 2% 1%; */
      /* Or inherit, initial, revert, unset */
      /* padding-block: inherit; */
    }
</style>
</head>
<body>
  <div class="example">
    This is an example demonstrating correct use of padding-block.
  </div>
</body>
</html>

Explanation:

1. Length values: You can specify the padding using absolute units like px, em, rem, etc. In the example above, padding-block: 20px 10px; applies 20px padding to the block-start and 10px to the block-end.

2. Single Length Value: Using padding-block: 15px; applies the same padding (15px) to both block-start and block-end.

3. Percentage values: padding-block: 2% 1%; will apply 2% of the containing block’s size to block-start and 1% to block-end.

4. Global values: You can also use inherit, initial, revert, revert-layer, or unset to control CSS inheritance and initial values.

The padding-bottom property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-bottom: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding-bottom: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding-bottom: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding-bottom: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding-bottom: 10px;
}

The padding-left property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-left: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding-left: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding-left: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding-left: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding-left: 10px;
}

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.

The padding property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding: 10px;
}

The padding-right property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-right: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding-right: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding-right: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding-right: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding-right: 10px;
}

The padding-top property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-top: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding-top: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding-top: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding-top: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding-top: 10px;
}

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 issue you’re encountering is due to incorrect use of the pointer-events CSS property value. The W3C Validator indicates that normal is not a valid value for pointer-events.

How to Fix

The pointer-events property accepts specific valid values, and while “normal” is not one of them, the correct relevant value you likely intended to use is auto.

Valid Values for pointer-events

Here are the most common valid values for pointer-events:

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */

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

Example Fix

If your original CSS is like this:

<style>
  .my-element {
    pointer-events: normal; /* This is incorrect */
  }
</style>

You should change it to:

<style>
  .my-element {
    pointer-events: auto; /* This is correct */
  }
</style>

Summary

To resolve the W3C Validator issue, replace any occurrence of pointer-events: normal; with pointer-events: auto; or another appropriate value based on the desired behavior.

The value px for a width property is incorrect, it should include both the value and the units, like 10px, or just 0 if it’s zero width. Using only the units without the value is incorrect.

Example of Incorrect CSS

<style>
  .example {
    width: 300; /* This is missing the unit */
  }
  .example2 {
    width: px; /* This is missing the value */
  }
</style>

Corrected Example of CSS

Make sure to include the unit (like px, em, %, etc.) when specifying the width:

<style>
  .example {
    width: 300px; /* Correctly includes 'px' unit */
  }
</style>

Conclusion

Always ensure to provide proper units when specifying dimensions in CSS. Common units are:

• px (pixels)
• em (relative to the font size of the element)
• % (percentage of the parent element’s width)

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;

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.