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?
This question is related to
css
if you set your CSS within classes, you can easly remove them using jQuery removeClass() Method. The code below removes .element class:
<div class="element">source</div>
<div class="destination">destination</div>
<script>
$(".element").removeClass();
</script>
If no parameter is specified, this method will remove ALL class names from the selected elements.
If anyone is coming here looking for an answer that utilizes iframe here it is
<iframe srcdoc="<html><body>your-html-here</body></html>" />
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
<h1 class="no-style-h1">
Title
</h1>
In my specific scenario i wanted to skip applying common styles to a specific part of the page, better illustrated like this:
<body class='common-styles'>
<div id='header'>Wants common styles</div>
<div id='container'>Does NOT want common styles</div>
<div id='footer'>Wants common styles</div>
</body>
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 :-) )
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
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.
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:
Simplest Fix
Put everything in an iframe. This has it's own set of limitations:
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.
another ways:
1) include the css code(file) of Yahoo CSS reset and then put everything inside this DIV:
<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>
2) or use
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.
Download "copy/paste" stylesheet? to reset css properties to default (UA style):
https://github.com/monmomo04/resetCss.git
User-agent style:
Browsers' 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/
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.
<div class="disable-all-styles">
<p>Nothing in this div is affected by my sass styles.</p>
</div>
Of course all your styles will now be prepended with the :not() selector, so it's a little fugly, but works well.
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');
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:
<div class="remove-all-styles other-classe another-class">
<!-- content -->
<p class="text-red other-some-styles"> My text </p>
</div>
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.
revertActually
revert, as the name says, reverts that property to its user or user-agent style.
allAnd when we use
revertwith theallproperty, 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.
There are two ideas here being confused:
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 "reset" or "reboot" 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 "reset" 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 "clear out" 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 "initial" 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 "display" pushes block level elements back to "inline" and breaks table layouts and other things.
So I do NOT agree with users here using "initial" 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 "reset" 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 "reset" 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 "initial" destroys the browser UA style sheet values completely! BAD IDEA! A better way is to simply use "all:revert" for non-IE browsers on every element using a wildcard, and "inherit" only for a handful of inherited root-level properties found in the "html" and "body" elements that affect all inheriting children in the page. (see below). I'm NOT for these huge resets of properties using "initial" or going back to some imaginary standard we assume all browsers or IE will use. For starters "initial" 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 "all:revert" 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 "reboot" 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;
}
For future readers. I think this is what was meant but currently isn't really wide supported (see below):
#someselector {
all: initial;
* {
all: unset;
}
}
Source: Stackoverflow.com