Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I remove CSS element style inline (without JavaScript)?

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.

like image 989
simon Avatar asked Jan 27 '10 15:01

simon


People also ask

How do you remove an element style in CSS?

You can remove CSS style properties from an element by setting the property to a null value, e.g. box. style. backgroundColor = null; . When an element's CSS property is set to null , the property is removed from the element.

How do I get rid of inline style?

To remove inline Styles from an existing page, open your page with the editor, select the paragraph (or the entire content by pressing CTRL + A) and then click on Remove Formatting button. Inline styles, while they have a purpose, are not the best way to maintain your Web site.

How do I override an inline style in CSS?

Using !Adding the ! important keyword to any CSS rule lets the rule forcefully precede over all the other CSS rules for that element. It even overrides the inline styles from the markup.

How do you remove an element from a style?

Use the removeAttribute() method to remove all styles from an element, e.g. box. removeAttribute('style') . The removeAttribute method will remove the style attribute from the element.


1 Answers

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.

like image 145
ЯegDwight Avatar answered Sep 22 '22 17:09

ЯegDwight