CSS Element Back to Default Style

How to reset/remove CSS styles for a specific element or selector only

The CSS property all has a keyword initial that sets the CSS property to the initial value as defined in the spec. The all keyword has broad browser support except for the IE and Opera Mini families.

/* basic modern patch */

#reset-this-root {
    all: unset;
}

#reset-this-root {
    all: initial;
}

Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

Relevant GitHub repo with a December 2017 more exhaustive list
Related
Related from MDN
Related W3C specs

With all this said, I don't think a CSS reset is something feasible unless we end up with only one web browser, if the 'default' is set by browser in the end.

CSS element back to default style

In CSS3, yes. You could use the negation pseudo-class:

.outer:not(#d3) { foo:blee; etc etc }

Too bad CSS3 support is a little lacking at the moment with most browsers...

With CSS level less than 3, you're screwed. Sorry.

Reset CSS display property to default value

A browser's default styles are defined in its user agent stylesheet, the sources of which you can find here. Unfortunately, the Cascading and Inheritance level 3 spec does not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4 — the working group simply hasn't settled on a name for this keyword yet (the link currently says revert, but it is not final). Information about browser support for revert can be found on caniuse.com.

While the level 3 spec does introduce an initial keyword, setting a property to its initial value resets it to its default value as defined by CSS, not as defined by the browser. The initial value of display is inline; this is specified here. The initial keyword refers to that value, not the browser default. The spec itself makes this note under the all property:

For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.
This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.

So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(An alternative to the above would be div.foo:not(.bar) { display: inline-block; }, but that involves modifying the original selector rather than an override.)

How to make reset.css not apply inside 1 element?

Solved: Give this class to the element. revert behaves exactly the way I want. Returns all elements inside this one element to browser default styling, while my css reset remains active on rest of the application. I don't know if there are any drawbacks.

.unset * {
  all: revert;
}

How to set CSS attributes to default values for a specific element (or prevent inheritance)

If you are saying about the browser defaults than look at CSS reset stylesheets, they are all over the web, those stylesheets reset each elements properties to a standardized value.

Few Examples

Meyer Web

HTML5 Doctor (CSS Reset With HTML5 Elements Included)

If you are saying manual style resets and ignore inheritance, than until now, there's no way to reset the styles completely unless and until you re-declare their values so for example

div {
   color: red;
   font-family: Arial;
}

div p {
   /* Here it will inherit the parents child unless and 
      until you re specify properties with different values */
}

How to set inline CSS of element to default using javascript?

You can get inline CSS in style attribute of element using getAttribute() and store it in variable and on check/uncheck of checkbox insert and remove it from style attribute

var checkBox = document.querySelector('#form input[name=termsCheckBox]'),    terms = document.getElementById('termsText'),    style = terms.getAttribute('style');
checkBox.addEventListener('click', function(){  if (checkBox.checked)    terms.style.cssText = "color:black; font-weight:normal";  else    terms.style.cssText = style;});

<form id="form">  <input type="checkbox" name="termsCheckBox">  <textarea id="termsText" style="color:red; font-weight:bold">termsText</textarea></form>

How to reset back to default css after adding style?

Thanks to the comments by @UlukBiy and @varren I solved the issue. System.out.println(textfield.getStyleClass()); was of great use since it allowed me to check which style classes were applied on the text field as default. And as it is pointed out in the comments those where text-input and text-field.

So to restore the text field's css to its default value I just did:

textfield.getStyleClass().clear();
textfield.getStyleClass().addAll("text-field", "text-input");

List-Style CSS override back to default

Use !important, e.g.:

ol li {
  list-style: inherit !important;
}

ol {
  list-style: inherit !important;
}

Change element display none back to default style value JS

You need just assign it to empty value:

document.getElementById(id).style.display = "";

Or using removeProperty method:

document.getElementById(id).style.removeProperty( 'display' );

But note that removeProperty will not work on IE<9.

If you want to get original CSS value you will need probably to get it from empty <iframe> element. I created example on jsFiddle how to get current value using getComputedStyle and iframe value on jsFiddle.

Please note that getComputedStyle not support old versions of IE. It support IE9+.

For IE8 you should use Element.currentStyle