How to Disable All Styles on an Element? Any Property to Set All Attributes of an Element to None All in One Go

How do you disable all styles on an element ? Any property to set all attributes of an element to none all in one go?

AFAIK, there's no such possibility in CSS. You have two options:

1: Select your H2 elements as specifically as possible and then apply your css to remove the styling. Pseudo code, as I do not know the structure of your HTML:

#master_page #page h2{font-style:none; etc...}

2: Use JavaScript to dynamically remove all formatting of a selected element. This solution however implies you could not restyle the element at all, so I guess it's not what you're looking for. just to be complete :)

Reset/remove CSS styles for element only

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

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;
}

/* basic modern patch */

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

Relevent github repo with a december 2017 more exaustive list
Related
Related from MDN
Related W3C specs

As mentioned in a comment by @user566245 :

this is correct in principle, but individual mileage may vary. For
example certain elements like textarea by default have a border,
applying this reset will render those textarea's border less.

JAVASCRIPT ?

Nobody thought about other than css to reset css? Yes?

There is that snip fully relevant : https://stackoverflow.com/a/14791113/845310

getElementsByTagName("*") will return all elements from DOM. Then you
may set styles for each element in the collection:

answered Feb 9 '13 at 20:15 by VisioN

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

With all this said; i don't think a css reset is something feasable unless we end up with only one web browser .. if the 'default' is set by browser in the end.

For comparison, here is Firefox 40.0 values list for a
<blockquote style="all: unset;font-style: oblique"> where font-style: oblique triggers DOM operation.

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

Disable CSS Styling for all elements in specific div?

There are various CSS reset values you can use with the all property to set the value of almost every property.

.modal-body {
  all: initial | unset | revert
}

initial value for property default values
unset value for property default or inherit if an inherited property
revert for default value for that element (browser styles), I think the only difference here would be that display would be block instead of inline for a div element.

The example above would only style the .modal-body itself though, if you want to reset values for every single element within it as well you could do the following:

.modal-body,
.modal-body * {
  all: initial | unset | revert
}

This will not only target .modal-body but every descendant of .modal-body. Be careful with a value other than unset for this though as it's extremely powerful, and with great power comes great responsibility.

If you're still having issues, your other styles might be more specific and therefore override this rule. You could try and add !important however that would necessitate using it on every re-style of elements in your modal. In this case I would suggest giving your modal an ID and using that to style it, and combing through your other CSS to remove ID selectors flattening the specificity.

Not sure I fully understand your comment... If this is not the HTML you meant, please update your question to contain your HTML and I'll update this answer:

<div id="modalSignaturePreview">
  <div class="modal-body"></div>
</div>

Anyways for the above HTML you can target it in CSS with #modalSignaturePreview .modal-body, here we're targeting all elements with a class of modal-body that are a descendant of any element with an ID of modalSignaturePreview

How to disable a STYLE element in HTML/JS?

You can enable/disable a style element, using the media attribute.

By setting it to a value that will not match any device, you are actually disabling it.

<style media="max-width: 1px">
   /* Nothing contained in this styles element will be applied */
</style>

By dynamically setting and removing this attribute and its value, you can emulate the enabled/disabled behavior, as in the following example:

document.getElementById('but').addEventListener('click', function toggle(){  let styleEl = document.getElementById('styles')  // toggle enabled/disabled  if(styleEl.hasAttribute('media')) styleEl.removeAttribute('media')  else styleEl.setAttribute('media', "max-width: 1px")})

<style id="styles" media="max-width: 1px">   div { color: red }</style>
<div id="but">Click me</div>

How do I remove all CSS styles for an element without a Class or ID?

As an alternative to Mihai's answer, if you'd like to be able to use it on more than element, add a class to any appropriate button:

<button class="nostyle">

Then in your CSS, simply change button to button:not(.nostyle).

That's it! ...what, you were expecting more work?

Here's the updated code:

button:not(.nostyle) {    width: 100px;    height: 45px;    background-color: #12aeef;    border: none;    box-shadow: 0px 5px 3px #888888;}

<button>Btn1</button><button>Btn2</button><button class="nostyle">Btn3</button><button>Btn4</button><button>Btn5</button>

Remove all CSS properties from an element and its children

You can use the all property to unset all properties.

body { font-size: small; background-color: #F0F0F0; color:blue; }blockquote { background-color: skyblue;  color: red; }blockquote { all: unset; }

<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.

Reset element with a rule (delete all element styles on one class)

You can create a single CSS class that will "reset" styles to whatever you want:

.reset{
  border:0;
  padding:0;
  margin:0;
  font-weight:normal;
  /*etc.*/
}

Then apply to your elements:

<h1 class="reset">...</h1>

Is this what you are after?

Just keep in mind that the first "C" in CSS stands for Cascading and thus you may need to be more specific in the CSS to overcome other styles applied to an element. CSS Precedence reference.

simplest way to remove all the styles in a page

You can recursively iterate through all elements and remove the style attribute:

function removeStyles(el) {
    el.removeAttribute('style');

    if(el.childNodes.length > 0) {
        for(let child in el.childNodes) {
            /* filter element nodes only */
            if(el.childNodes[child].nodeType == 1)
                removeStyles(el.childNodes[child]);
        }
    }
}

Or:

function removeStyles(el) {
    el.removeAttribute('style')

    el.childeNodes.forEach(x => {
        if(x.nodeType == 1) removeStyles(x)
    })
}

Usage:

removeStyles(document.body);

To remove linked stylesheets you can, in addition, use the following snippet:

const stylesheets = [...document.getElementsByTagName('link')];

for(let i in stylesheets) {
    const sheet = stylesheets[i];
    const type = sheet.getAttribute('type');

    if(!!type && type.toLowerCase() == 'text/css')
        sheet.parentNode.removeChild(sheet);
}

Or:

const sheets = [...document.getElementsByTagName('link')];

sheets.forEach(x => {
    const type = x.getAttribute('type');
    !!type && type.toLowerCase() === 'text/css'
        && x.parentNode.removeChild(x);
});

Reset styles on given element, but preserve HTML Attribute stylings

HTML attributes of specific style property are outdated and not recommended now. Correct way to solve bootstrap override is using style attribute.

<table style="background-color: #D9D9D9;">
  .. Etc
</table>

if you need to force style - can use !important

<table style="background-color: #D9D9D9 !important;">
  .. Etc
</table>

To override bootstrap properties, you have to load personal CSS document after bootstrap with all styles you need to override.