Question

I have a style assigned for a specific HTML element in my stylesheet file, like this

label {
  width: 200px;
  color: red; 
}

In one special case, I would like to use a label element in the HTML document, but ignore the style specified for the label element (just for one instance in the document). Is there any way to achieve this in a generic way without overriding the element style attributes with inline styles?

<label for="status">Open</label>

To reiterate, to the HTML code displaying the label the element style (width 200 px, color red) is applied. I would like the default style attributes to be used (without knowing what they are) and without having to know what is specifically specified in the element style setting.

Answer 1

From the Mozilla developer center:

Because CSS does not provide a "default" keyword, the only way to restore the default value of a property is to explicitly re-declare that property.

Thus, particular care should be taken when writing style rules using selectors (e.g., selectors by tag name, such as p) that you may want to override with more specific rules (such as those using id or class selectors), because the original default value cannot be automatically restored.

Because of the cascading nature of CSS, it is good practice to define style rules as specifically as possible to prevent styling elements that were not intended to be styled.