Reset all CSS for one element and its children - html

My Problem:
We offer full customization for our site to our customers (so they can make out app look like the rest of there site). They provide us a HTML "surround" page, which our main app is rendered into (no iFrame, the HTML of our app is string.replaced() server side essentially). They can include any JS and CSS links to style this "surround" page.
The problem is, they often include their main CSS file for there full website (totally unnecessary, but easiest method to make there part look right), which includes lots of generic rules. Our app then obviously then obeys these rules, and it breaks a lot of our default styles. Specific example, they have a 'h3' rule which sets text-transform and font-family
h3 {
text-transform: uppercase;
font-family: 'Fjalla One',sans-serif;
}
In our own CSS, we set a the font-family of a class that is applied to the h3 tag, but not the text-transform property. As such, our CSS changes the font-family, but we inherit the text-transform.
Is there any way I can tell the browser to "start again" with applying CSS from a given element? I know its very un-Cascading, but I need the users CSS to stop cascading past our apps first element, and then apply our CSS to that element and its children. I hope i've explained myself clearly.

Option 1:
Give them a class like remove-all-styles
.remove-all-styles {
all: revert;
}
Then write your css code below this css code and make sure your css has higher priority than their css file.
What is the order of loading the CSS files in a HTML page?
Option 2:
Give initial or auto values to all elements in css then write your css code below
https://www.w3schools.com/cssref/css_default_values.asp

Related

Override CSS site style with stylesheet on page

Is there any way of overriding all other CSS on a page and applying a different stylesheet. I have a file with H1,H2,P tags specified in stylesheet but in a modal window I want to apply separate styles but the styles are being ignored in place of the site styles. Is there anyway of stopping the initial site styles being applied
The simplest way would be to remove all stylesheet tags from the HEAD element of the page using JS, except the sheet you want (or then add in that sheet).
If you use jQuery,
$('link[rel=stylesheet]').remove();
Or to target specific sheets:
$('link[rel=stylesheet][href~="whatever.css"]').remove();
Though this, as noted by #Olly Hodgson would be overkill and destroy the styling you'd rely on for the page.
Realistically, place your preferred stylesheet below all others (and any inline CSS), it will override any rules not using the !important demarkation. Alternatively, if you are writing CSS and the specific style is not being enforced, use !important, eg:
div{height:99px!important;}
Write your new styles just below to the ones that you need to override. This will work for you.
You can add another stylesheet to the page after any others already loaded. Then make sure the rules you write in it are of a higher specicifity than the ones you wish to override.
So if your main page's CSS has something like this:
p { color: #000000; }
You could override it in your modal like this (assuming your modal has class="modal"):
.modal p { color: red; }
Another option is the load the modal content into an iframe, using a page which only has your styles supplied.

Nullify css rules

Okay, this is a gross oversimplification, but I have a javascript application to help people develop webpages. It has its interface superimposed over the page that is being developed, and it all works fine, apart from one thing.
If the div class used in the interface is used by the webpage that is being developed, the interface' embedded stylesheet overrides the properties of the webpage!
This happens on jsfiddle, the embedded css is takes precedence over the external css.
JSfIDDLE
external css:
.color {
color: green;
}
Index.html:
<style>
.color {
color: blue;
}
</style>
<div class="color"> Text to be coloured </div>
When run, the text is blue. If someone could make the text turn green, I think it would demonstrate how to overcome the problem.
Obviously, one way to fix this would be to change the interface classes and rules to something like this:
<style>
.color_interface {
color: blue;
}
</style>
<div class="color_interface"> Text to be coloured </div>
And make them unique, but the project has hundreds of css rules, and I'm just wondering if there's a better way, and a safer way (there's still a small chance someone has a rule "color_interface") to do nullify css rules, so they won't contaminate the page.
I'm thinking the only way to do it is probably a 'reset' stylesheet concerning my rules, setting them all back to their defaults. Is there a way to do this dynamically with jquery, maybe?
What you're witnessing is CSS by design. Specifically, specificity.
If your goal is to release some kind of library that can be used publicly and you want to avoid naming conflicts, I think a fair practice is to simply namespace your selectors, e.g., .starkers-color { color: blue; }. That won't necessarily avoid specificity issues, but it should prevent against having your selectors overridden by implementors.
If you inspect the JSFiddle page you'll see that the reason for it not working is that your inline style definition is placed in the body where it has no effect.
The CSS rules you specify is instead placed as an inline style in the head element.
To your problem:
Again, referring to JSFiddle, would it be possible to load the page in development inside an iframe? This would mean you get the separation you require.
This is because the order of the CSS when rendering. Your include is at the top of the page but your style tags are below that, meaning your style tags will alway take precedence over you include at the top. You could try adding an important to you css includes but this is majorly hacky and could create a whole load of new issues.

Subdomain ignoring margins from linked stylesheet?

I am having a problem which I haven't run into before. I am working on a site http://recruitingprocessanalytics.redbranchmedia.com and when a user clicks to log in, it redirects to a subdomain http://app.recruitingprocessanalytics.com/. The subdomain is using the stylesheet from the main site. The problem is, it's ignoring some of the CSS rules, but not all of the them.
For example, look at the h1 "Demo" on the subdomain in developer tools. It's supposed to have a margin-top of 10px and I see it in developer tools, but it just isn't adding the margin.
margin-top and margin-bottom are only working on block elements, not on inline elements!
You changed the usual behavior of the heading elements to display: inline; in the common.css-file, which prevents the margin from being shown.
I guess the common.css file is not used on http://recruitingprocessanalytics.redbranchmedia.com.
Change the behaviour to display: block;, then the margins will be shown!
Try adding the margin-top: 10px inline in the HTML. Like so:
<h1 style="margin-top:10px">Title</h1>
The reason I suggest this is to see if the style gets applied. If it does, your problem is a problem of specificity, or something is over riding your CSS.
Check to see if the style sheets are linked in a different order. Or, if maybe you already have an inline style in your h1 tag?
If it were me trying to debug this, I would start with an inline style.
Hope this helps!

How to prevent a HTML element from being targeted by a CSS rule?

Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers.
The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like
.containter1 .containter3 { ... }
will target an element inside :
<div class="container1">
<div class="containter2">
<div class="containter3">Element
...
Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like
img { ... }
will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?
/* EDIT TO CLARIFY */
I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:
img { display:none; }
The problem is that you cannot set a corresponding generic rule to do the opposite, like :
img { display:not-none; }
because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.
So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).
If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.
In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).
You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:
http://www.cssreset.com/
So, something like -
<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>
is your best bet.
The only way you can change CSS for specific element is modification of existing styleshits or creating new style which is more specific and will overload other styles.
and I have to make my little block of code "fit" inside this.
Once you have make some block of code, you can put style tag inside that block of HTML code like this, for instance:
<div id="block_of_code_available_for_modification">
<style type="text/css">
//css code which will fix styles of your content without influencing other elements on a page.
</style>
</div>
Or, if you have just a few elements you need to fix styles for, you can use style attribute of HTML elements (once you can set modify HTML, you can always add something like below... Well, the same as adding style tag). Priority of css properties inside style attribute is the highest one. Except if there is no !important in some previouse styles:
<img style="any css properties you need" src="..." />
The default display value for an img element is inline-block. If you want to reset the display value for all images, why not use that?
If you've got multiple different types of elements that are being set to weird values, then the problem is maybe a bit more complex as you'd need to consider which elements to set to what display type. But all HTML elements do have well-defined default display types, so it shouldn't be too hard to reset them all.
img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...
If it comes down to it, you could just use one of the reset CSS scripts that are available, to set everything back to the correct defaults.
No there is no way you can stop other rules from getting applied on a particular element.
you have to redefine all those rules for that html element so they will overwrite all the other rules.

Prevent CSS Inheritance

I am trying to write a jQuery plugin that can be ported to any site.
What my plugin does is create a div and applies a style to it.
It works well in standalone but when I put it into the context of a site, there is a css class that it is inheriting from. The thing is, I can't modify the web site's existing CSS... so I need a way to "prevent inheritance" (which I know is technically not possible).
I have tried the !important flag on the specific styles that are causing problems, but to no avail. I am looking for a point in the right direction more than specific code, so that's why I'm not posting all of my code...
The other thing is that I do not want to use an iframe instead of a div because I need to be able to provide the ability for a form to interact with my div, potentially.
However, the two css classes from the web site (which I can not modify) that are causing my problems are:
* {
font-weight: inherit;
font-style: inherit;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
html {
width: 100%;
height: 100%;
font-size: 10px;
}
CSS isn't inheritance-based, but rather "cascading" (it's the first C in "CSS"). Understanding that, there are a few ways you could work around the issue you describe:
1) Add inline styles to your element via script. Inline styles take precedence over CSS rules, either from classes, ids, or elements.
2) Add your own CSS file programmatically. CSS cascades in the order the rule appears in the document. You can write a CSS link element to the bottom of the page to include your plugin's CSS rules. Since these are presumably lower or "later" in the document than the site's CSS, your rules will take precedence.
3) Write a style tag to the bottom of the document programmatically. Same concept here as #2, but without an external file.
I would personally tend toward #1. If you want your plugin to be consistent in appearance no matter what else is going on, no matter what site it is used on, the only way to be sure is to apply your styles inline.
That said, there's value in making your plugin's interface customizable by using CSS classes. Maybe you're trying to take something away that you shouldn't. For instance, if the entire site uses a Serif font, and you're forcing a Sans font on your plugin's UI, your plugin's look and feel is now at odds with the site. That could be a deal-breaker when someone is considering your plugin... customization is a good thing in the world of reusable code, and CSS is the way to make it happen.