Reset remove CSS styles for element only

Question

I m sure this must have been mentioned asked before but have been searching for an age with no luck  my terminology must be wrong   I vaguely remember a tweet I saw a while ago that suggested that there was a css rule available that would remove any styles previously set in the stylesheet for a particular element   A good use example might be in a mobile-first RWD site where much of the styling used for a particular element in the small-screen views needs  resetting  or removing for the same element in the desktop view   A css rule that could achieve something like    element     all  none      Example usage      mobile first     element      margin  0 10     transform  translate3d 0  0  0      z-index  50     display  block     etc      etc       media only screen and  min-width  980px       element       all  none          So we could quickly remove or re-set styling without having to declare every property   Makes sense

User · Answer

another ways   1  include the css code file  of Yahoo CSS reset and then put everything inside this DIV    lt div class  yui3-cssreset  gt       lt  -- Anything here would be reset-- gt   lt  div gt    2  or use    https   cssreset com scripts vanilla-css-un-reset  https   cssreset com scripts html5-doctor-css-reset-stylesheet  https   cssreset com scripts eric-meyer-reset-css  https   cssreset com scripts tripoli-css-reset-david-hellsing  https   cssreset com scripts normalize-css

User · Answer

There s a brand new solution found to this problem   Use all  revert or all  unset   From MDN      The revert keyword works exactly the same as unset in many cases  The   only difference is for properties that have values set by the browser   or by custom stylesheets created by users  set on the browser side        You need  A css rule available that would remove any styles previously set in the stylesheet for a particular element     So  if the element have a class name like remove-all-styles   Eg    HTML    lt div class  remove-all-styles other-classe another-class  gt       lt  -- content -- gt      lt p class  text-red other-some-styles  gt  My text  lt  p gt   lt  div gt    With CSS      remove-all-styles       all  revert        Will reset all styles applied by other-class  another-class and all other inherited and applied styles to that div   Or in your case       mobile first     element      margin  0 10     transform  translate3d 0  0  0      z-index  50     display  block     etc      etc       media only screen and  min-width  980px       element       all  revert          Will do      Here we used one cool CSS property with another cool CSS value          revert         Actually revert  as the name says  reverts that property to its   user or user-agent style          all         And when we use revert with the all property  all CSS properties   applied to that element will be reverted to user user-agent styles    Click here to know difference between author  user  user-agent styles   For ex  if we want to isolate embedded widgets components from the styles of the page that contains them  we could write    isolated-component    all  revert      Which will reverts all author styles  ie developer CSS  to user styles  styles which a user of our website set - less likely scenario  or to user-agent styles itself if no user styles set   More details here  https   developer mozilla org en-US docs Web CSS revert  And only issue is the support  only Safari 9 1 and iOS Safari 9 3 have support for revert value at the time of writing   So I ll say use this style and fallback to any other answers

User · Answer

Any chance you re looking for the  important rule  It doesn t undo all declarations but it provides a way to override them    When an  important rule is used on a style declaration  this declaration overrides any other declaration made in the CSS  wherever it is in the declaration list  Although   important has nothing to do with specificity    https   developer mozilla org en-US docs CSS Specificity The  important exception

User · Answer

If anyone is coming here looking for an answer that utilizes iframe here it is  lt iframe srcdoc  quot  lt html gt  lt body gt your-html-here lt  body gt  lt  html gt  quot    gt   https   caniuse com iframe-srcdoc

User · Answer

For those of you trying to figure out how to actually remove the styling from the element only  without removing the css from the files  this solution works with jquery       selector   removeAttr  style

User · Answer

if you set your CSS within classes   you can easly remove them using jQuery removeClass   Method   The code below removes  element class        lt div class  element  gt source lt  div gt          lt div class  destination  gt destination lt  div gt           lt script gt              element   removeClass           lt  script gt    If no parameter is specified  this method will remove  ALL class names from the selected elements

User · Answer

If you happen to be using sass in a build system  one way to do this that will work in all the major browsers is to wrap all your style imports with a  not   selector like so      not  disable-all-styles       import  my-sass-file      import  my-other-sass-file       Then you can use the disable class on a container and the sub-content won t have any of your styles    lt div class  disable-all-styles  gt     lt p gt Nothing in this div is affected by my sass styles  lt  p gt   lt  div gt    Of course all your styles will now be prepended with the  not   selector  so it s a little fugly  but works well

User · Answer

BETTER SOLUTION  Download  copy paste  stylesheet  to reset css properties to default  UA style   https   github com monmomo04 resetCss git  Thanks Milche Patern   I was really looking for reset default style properties value  My first try was to copy the computed value from the browser Dev tool of the root html  element  But as it computed  it would have looked worked different on every system   For those who encounter a browser crash when trying to use the asterisk   to reset the style of the children elements  and as I knew it didn t work for you  I have replaced the asterisk     with  all the HTML tags name instead  The browser didn t crash  I am on Chrome Version 46 0 2490 71 m   At last  it s good to mention that those properties will reset the style to the default style of topest root element  but not to the initial value for each HTML element   So to correct this  I have taken the  user-agent  styles of webkit based browser and implemented it under the  reset-this  class    Useful link    Download  copy paste  stylesheet  to reset css properties to default  UA style   https   github com monmomo04 resetCss git  User-agent style  Browsers  39  default CSS for HTML elements http   trac webkit org browser trunk Source WebCore css html css   Css specifity  pay attention to specifity    https   css-tricks com specifics-on-css-specificity    https   github com monmomo04 resetCss git

User · Answer

You mentioned mobile-first sites    For a responsive design  it s certainly possible to override small-screen styles with large-screen styles  But you might not need to   Try this    thisClass          Rules for all window sizes         media all and  max-width  480px         thisClass              Rules for only small browser windows               media all and  min-width  481px  and  max-width  960px         thisClass              Rules for only medium browser windows               media all and  min-width  961px         thisClass              Rules for only large browser windows               Those media queries don t overlap  so their rules don t override each other  This makes it easier to maintain each set of styles separately

User · Answer

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  quot   quot   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  quot   quot    for  var i   0  len   allElements length  i  lt  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  lt blockquote style  quot all  unset font-style  oblique quot  gt  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

User · Answer

In my specific scenario i wanted to skip applying common styles to a specific part of the page  better illustrated like this    lt body class  common-styles  gt       lt div id  header  gt Wants common styles lt  div gt       lt div id  container  gt Does NOT want common styles lt  div gt       lt div id  footer  gt Wants common styles lt  div gt   lt  body gt    After messing with CSS reset which didn t bring much success  mainly because of rules precedence and complex stylesheet hierarchy   brought up ubiquitous jQuery to the rescue  which did the job very quickly and reasonably dirty     function            body   removeClass  common-styles            header  footer   addClass  common-styles           Now tell how evil it is to use JS to deal with CSS  -

User · Answer

There are two ideas here being confused   The first idea is about  quot returning quot  styles back to a browser s UA style sheet value set  the style sheet that comes with the browser on install that defines what each element looks like   Each browser defines its own styles as to how elements should look by default  This idea is about returning all page styles back to each browsers native element styles  The second idea is about  quot resetting quot  all default browser styles to a common look and feel shared by all browsers  People build special  quot reset quot  sheets to try and align all the browser elements to a common agreed on style  universally  This has nothing to do with a browsers default UA styles and more about  quot cleaning up quot  and aligning all browsers to a common base style  This is an additive process only   Those are two very different concepts people here are confusing  Because each browser often had default  out-of-the-box element and layout styles that looked slightly different  people came up with the idea of the  quot reset quot  or  quot reboot quot  style sheet to align all the browsers BEFORE applying custom CSS  Bootstrap now does this  for example  But that had nothing to do with people wanting to return to the browser s default look and feel  The problem was not the building of these custom  quot reset quot  style sheets  it is figuring out what the default CSS was for each browser and each element BEFORE any styles were applied  Most found out you cant rebuild an existing clean cascade until you  quot clear out quot  all styles already applied  But how to get back to the default browser styling  For some this meant going beyond returning the elements to the browsers UA style sheet that comes with the browser  Many wanted to reset back to  quot initial quot  property values which has NOTHING to do with the browser s default style  but really the properties defaults  This is dangerous as in the case of  quot display quot  pushes block level elements back to  quot inline quot  and breaks table layouts and other things  So I do NOT agree with users here using  quot initial quot  to reset anything or custom reset classes that change every property back to some arbitrary base value set  A better solution to me has always been to attempt to try and return all core element styling back to the browser s UA style sheet values  which is what all our end-users are using anyway  If you are creating a new website  you don t have to do this  You start with the browser s default styles and add to them  Its only after you ve added third-party CSS products  or found yourself with complicated CSS cascades you want to figure out how to return to the browser default style sheet values  For this reason  I m for creating your own  quot reset quot  sheet to reset all the elements to one common style first that s shared by all old and new browsers as a first step  You then have a solid framework that s much easier to revert to without going back to the browser defaults  You are simply building on a reset common core set of element style values  Once build your own  quot reset quot  sheet  one that ADDS not ALTERS the browsers UA styles  you have a site that s very easy to modify  The only problem remaining then is when you have a site that does NOT have such a reset sheet  or have that complex third party CSS and need to try and return to the browser UA styles  How do you do that  I realize Internet Explorer has forced us too manually reset every property to get back to any sort of reset  But pushing those property values all back to  quot initial quot  destroys the browser UA style sheet values completely  BAD IDEA  A better way is to simply use  quot all revert quot  for non-IE  browsers on every element using a wildcard  and  quot inherit quot  only for a handful of inherited root-level properties found in the  quot html quot  and  quot body quot  elements that affect all inheriting children in the page   see below   I m NOT for these huge resets of properties using  quot initial quot  or going back to some imaginary standard we assume all browsers or IE will use  For starters  quot initial quot  has poor support in IE and doesn t reset values to element defaults  only property defaults  But its also pointless if you are going to create a reset sheet to align all elements to a common style  In that case its pointless to clear out styles and start over  So here is my simple solution that in most cases does enough to reset what text-based values sift down into IE from the root and use  quot all revert quot  for all non-IE browsers to force non-inherited values back to the browser s UA style sheet completely  giving you a true restart  This does not interfere with higher level classes and styles layered over your element styles  which should always be the goal anyway  Its why I m NOT for these custom reset classes which is tedious and unnecessary and doesn t return the element to its browser UA style anyway  Notice the slightly more selective selectors below which would write over  for example  Bootstrap s  quot reboot quot  style values  returning them to the browser default styles  These would not reset element styles on elements for IE  of course  but for non-IE browsers and most inheritable text styling it would return elements in most agents to the UA style sheets that come with browsers   root  html       display  block      font-family  inherit      font-size  inherit      font-weight  inherit      line-height  inherit      -webkit-text-size-adjust  inherit      -webkit-tap-highlight-color  inherit      all  revert     html body       display  block      font-family  inherit      font-size  inherit      font-weight  inherit      line-height  inherit      margin  inherit      padding  inherit      color  inherit      text-align  inherit      background-color  inherit      background  inherit      all  revert     html body            IE elements under body would not be affected by this  but if needed you could add custom elements with property resets as needed to this sheet         all  revert

User · Answer

Let me answer this question thoroughly  because it s been a source of pain for me for several years and very few people really understand the problem and why it s important for it to be solved   If I were at all responsible for the CSS spec I d be embarrassed  frankly  for having not addressed this in the last decade   The Problem  You need to insert markup into an HTML document  and it needs to look a specific way   Furthermore  you do not own this document  so you cannot change existing style rules   You have no idea what the style sheets could be  or what they may change to   Use cases for this are when you are providing a displayable component for unknown 3rd party websites to use   Examples of this would be    An ad tag Building a browser extension that inserts content Any type of widget   Simplest Fix  Put everything in an iframe   This has it s own set of limitations    Cross Domain limitations  Your content will not have access to the original document at all   You cannot overlay content  modify the DOM  etc  Display Limitations  Your content is locked inside of a rectangle    If your content can fit into a box  you can get around problem  1 by having your content write an iframe and explicitly set the content  thus skirting around the issue  since the iframe and document will share the same domain   CSS Solution  I ve search far and wide for the solution to this  but there are unfortunately none   The best you can do is explicitly override all possible properties that can be overridden  and override them to what you think their default value should be   Even when you override  there is no way to ensure a more targeted CSS rule won t override yours   The best you can do here is to have your override rules target as specifically as possible and hope the parent document doesn t accidentally best it   use an obscure or random ID on your content s parent element  and use  important on all property value definitions

User · Answer

I do not recommend using the answer that has been marked as correct here  It is a huge blob of CSS which tries to cover everything  I would suggest that you evaluate how to remove the style from an element on a per case basis  Lets say for SEO purposes you need to include an H1 on a page which has no actual heading in the design  You might want to make the nav link of that page an H1 but ofcourse you do not want that navigation link to display as a giant H1 on the page  What you should do is wrap that element in an h1 tag and inspect it  See what CSS styles are being applied specifically to the h1 element  Lets say I see the following styles applied to the element    bootstrap min css 1 h1       font-size  65px      font-family   rubikbold  important      font-weight  normal      font-style  normal      text-transform  uppercase       bootstrap min css 1 h1   h1       font-size  36px       bootstrap min css 1 h1   h1  h2   h2  h3   h3       margin-top  20px      margin-bottom  10px       bootstrap min css 1 h1  h2  h3  h4  h5  h6   h1   h2   h3   h4   h5   h6       font-family  inherit      font-weight  500      line-height  1 1      color  inherit       bootstrap min css 1 h1       margin   67em 0      font-size  2em       user agent stylesheet h1       display  block      font-size  2em      -webkit-margin-before  0 67em      -webkit-margin-after  0 67em      -webkit-margin-start  0px      -webkit-margin-end  0px      font-weight  bold     Now you need to pin point the exact style which are applied to the H1 and unset them in a css class  This would look something like the following   no-style-h1       font-size  unset  important      font-family  unset  important      font-weight  unset  important      font-style  unset  important      text-transform  unset  important      margin-top  unset  important      margin-bottom  unset  important      line-height  unset  important      color  unset  important      margin  unset  important      display  unset  important      -webkit-margin-before  unset  important      -webkit-margin-after  unset  important      -webkit-margin-start  unset  important      -webkit-margin-end  unset  important     This is much cleaner and does not just dump a random blob of code into your css which you don t know what it s actually doing  Now you can add this class to your h1  lt h1 class  quot no-style-h1 quot  gt       Title  lt  h1 gt

User · Answer

For future readers  I think this is what was meant but currently isn t really wide supported  see below    someselector     all  initial            all  unset          Supported in  source   Chrome 37  Firefox 27  IE 11  Opera 24 Not supported  Safari

[css] Reset/remove CSS styles for element only

Examples related to css