Style to remove all styles - asp.net

Is there any way to apply a style that will effectively block the
application of any applied or inherited styles for that object and any
contained objects?

No. You'll have to override all other properties being set on it.

Write a style class i.e clearall override all the attributes that you need to what you want as the default vaules. i.e
.clearall {
display: block;
clear: both;
height: 1px;
margin: 0 0 0 0; ... }
Now, you can use that class to
<div class"clear">
<div class="awesome"> ..
</div>
</div>
<div class"clear">
<div class="woooow"> ..
</div>
</div>`
So now everytime that you need to reset the style, you can use that class

I would suggest to add at the end of your CSS code a complete reset code such as the one from Eric Meyer.
It should take care of erase most everything and and you can put your own code after that.

You can always can call !important on an element to override specificity inherits.
.wrapper p{color:red; background:blue;}
.wrapper div p{color:blue !important; background:none !important;}

Actually - no... But you can try to use jQuery for this purposes.
$('.class').removeClass().removeAttr('style');
It should remove all classes from matching elements and clear style attribute. Though, it's untested +)

If you want to do this for testing/debugging purposes, have a look at the Firefox Web Developer add-on. It has functions for removing CSS for whole pages or individual elements and their contained elements, or for altering CSS on the fly whilst viewing the page.
If you are looking for a good CSS reset for production use, have a look at Tripoli. This is a set of CSS styles that will reset the default rendering in each browser to the same common base, to use as a starting point for applying your own styles. There are many other CSS resets around but Tripoli is my personal favourite.

There‘s no one CSS property that turns off all other CSS properties. You’ll have to set each property to whatever value you want (for some CSS properties, e.g. font-family, there’s no “off” value — text has to be rendered in some font).
As for “that object and any contained objects” (emphasis mine), the * selector selects all elements. So, your CSS rule could look like this:
.turn-off-all-styles,
.turn-off-all-styles * {
/* Disable every CSS property here */
}
As others have mentioned, check out Eric Meyer’s CSS reset for a good example of setting all CSS properties to defaults. If you add !important after each value, that should stop other CSS rules from interfering with this style, e.g.
.turn-off-all-styles,
.turn-off-all-styles * {
margin: 0 !important;
...
}

Related

I've to select a div class in css

I've to remove the inline style of of the div element, can anybody tell me how to select that particular div, I've tried selecting class but inline style has more priority than class selector. Please tell me how to remove the inline style from it, I'm using WordPress and it is theme generated css.
This is one of those just because you can doesn't mean you should moments. Ideally, you should make a child theme and make your updates there. You can find plenty of help on how to make child themes in the WordPress docs.
That said, it is possible, but it's not best practice. This code will override what is in your current inline style.
/* this select a div with the class img-inner with the style attribute */
div.img-inner[style] {
margin: 2rem !important; /* anything you need to override needs an !important */
padding: 0 !important;
}
Once you have the div selected, you can pretty much do what you need. I just put in some declarations as an example. You can add more declarations or override/unset others.
If you need, you can use a more complex attribute selector to see if the style contains something specific.
Please try this -
.col-inner .img a.image-lightbox .img-inner.img-cover{padding: top: 77% !important;margin: 0 !important;}

CSS rules conflict : CSS disabled as a result of conflicts with another one

I have a web page, which I need to change its CSS. At the moment, I need a quick fix to an annoying issue. There are some HTML elements that use several CSS classes like the one below.
<ul class="core nested-level">
The problem is that "core" is defined in many places with different rules; hover, ul, *, etc. One of these rules for some reason cause "nested-level" to be disabled as chrome developer tool annoyingly keep showing up.
Any idea how to quick fix this issue or to force this style to override the already defined one (if it exists) ? I tried out the style below, but it didn't show up properly:
.nested-level {
padding-left: 62px;
}
It seems that you defined a rule in your "core" css class for a specific HMTL element. For instance:
ul.core{
padding-left: 0px;
}
Then in your "nested-level", assumingly, you tried to define a rule for the same property.
The way to fix it is either to avoid defining your css rule based on an HTML element, or to use the "important" keyword when defining your css rule, as this
.nested-level {
padding-left: 62px !important;
}
This will fix your issue.
better is dont use !important.
Read More: https://j11y.io/css/dont-use-important/
add ID in Element tag . id Selector have Higher priority than class Selector
<ul id="myId" class="core nested-level">
and use css Like :
#myId {
padding-left: 62px;
}

HTML5 hidden attribute not compatible with Bootstrap

I was refactoring some code and decided to change the usual style="display:none" to use the HTML5 hidden attribute, in order to hide a button. Only to find that it is not compatible with bootstrap's btn class. That said, I will keep using the style display attribute but I wonder if this is a bug that should be reported or simply a feature that everyone should be aware of.
The corresponding jsfiddle can be found here
The HTML5 specification already warns developers about this:
Note: Because this attribute is typically implemented using CSS, it's also possible to override it using CSS. For instance, a rule that applies 'display: block' to all elements will cancel the effects of the hidden attribute. Authors therefore have to take care when writing their style sheets to make sure that the attribute is still styled as expected.
— The HTML5 Specification - 7.1 The hidden attribute
The problem you're having is that Bootstrap's .btn selector specifically defines display: inline-block, which overrides the hidden attribute's display: none.
This means that specificity is going to be an issue. This is a rare case of where !important may be desirable. I'd personally implement the following style rule:
[hidden] {
display: none !important;
}
This ensures that all elements with a hidden attribute will be set to not display, regardless of specificity. This is doubly good in that this will make the hidden attribute effective on any browser which supports the [att] selector notation (which is any browser which supports CSS2).
Working JSFiddle demo.
Try adding this to your css:
*[hidden] { display: none !important; }
for example; https://fiddle.jshell.net/bh8h5tya/
It's not hidden because bootstrap applies display: inline-block on the class .btn
Bootstrap provides the following .hidden class that you can use to show/hide elements. Try using that.
.hidden {
display: none !important;
}

How to override css attribute-only style

I have a page that I need to modify some behavior. The element that I'm working on has a [attribute] directive, like this:
<div class="someClass" myAttributeDirective></div>
The myAttributeDirective has it's own css page that defines some styling, like this:
[myAttributeDirective] {
/* a few different properties */
border: 1px solid red;
position: relative;
}
/* then some more class stylings related to the directive */
So you see, in the css, it's defining some styles for JUST the attribute, so if the attribute exists in any element, apply those stylings.
When I view my element in Dev tools, it doesn't look quite right. In order to "fix" it, I un-check one of the css properties that is causing my issue, the position: relative;.
BUT
I can't change the "core" css for that directive, because it's used throughout the application. AND, if I try to override that property, it doesn't work (actually, cycling through the different position: * options only leads to making things look worse).
So, how do I override that specific property, without changing the core css file?
If you want to override style in any case irrespective of which order style is applied, consider applying style inline in the div.
<div class="someClass" myAttributeDirective style="position:absolute;"></div>

Remove all the styling from elements which have inline styling using CSS

Suppose I have some html like this -:
<div style="blah...blah">Hey Nice</div>
<a style="blah...blah">Great</a>
How do I remove all the inline styling applied to the above elements in my stylesheet considering I don't know what all inline styling exists.
Currently I am trying this, but in vain -:
div[style], a[style]{ !important }
You must reset all css properties for elements that have style attribute:
[style] {
position: static !important;
float: none !important;
border: 0 none !important;
margin: 0 !important;
padding: 0 !important;
outline: 0 none !important;
// and so on
}
There are several determining factors determining which CSS property prevails in any situation. In order, these are:
Whether the property value has the !important flag or not.
If the style declaration is applied inline via the style attribute.
The strength of the CSS rule selector
If the rule has any ID clauses, and if so how many
If the rule has class, attribute or pseudo-class clauses, and if so how many
If the rule has any tagname clauses, and if so how many
If the property is parsed later in the source than another property with a rule of the same strength
So the only way to override the properties is to make sure that all the properties applied via style are applied elsewhere in your stylesheet, and have the !important declaration. The most rational way to do this is still very awkward — it would involve applying a very specific reset stylesheet, and including !important on every property on every rule.
But even if this is done, you still couldn't override inline style declarations that have !important themselves.
You've told Mojtaba that there should be a better solution, but that better solution would involve designing CSS to break its own rules. Imagine if there was a simpler solution for overriding inline styles from stylesheets designed into the language of CSS — should there also be another solution for simply overriding the override from inline styles? Where does the cycle end? All in all, I'd recommend using Javascript or giving up. Or describing your specific problem in more detail — there may be another solution!
If you're not happy with using !important overwrites in the CSS (as suggested by others on here), the only way would be to use JavaScript to remove the styles.
This is really easy in jQuery (better if you're able to assign a class name to the elements to select it with):
$('.selector').attr('style', '');
This will simply replace the element's 'style' attribute with nothing, thus removing the inline styles.
This isn't ideal though since it will rely on the visitor having JavaScript enabled, and may well result in the visitor seeing a style 'flash' as the page loads: the styles assigned in-line to the element before the JS kicks in and removes it.

Resources