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.
Related
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
I tried to find an answer but nothing...
I have a small application that loads in to other websites inside a div tag. This div has a specific id like -> "myAppHere"
Now, all the html is inside this div, but as I can see my elements are affected by each site own css rules.
Is there a way to cancel all the other sites css rules?
something like:
#myAppHere *{
padding: 0;
margin: 0;
etc....
}
because the above sample code doesn't work well.
You cannot simply add:
#myAppHere * {
...
}
cause general rules are overwritten by more specyfic rules. You didn't say in what way app is loaded in that div(is it inner frame, plain HTML etc.) so it's hard to find a solution.
What you can do(assuming it's just extra HTML added to your #myAppHere element) is to check CSS styles set to each element(using e.g. Firebug) and write your on rules in your CSS file, which are more specyfic.
That's a scary requirement you have there.
You can try adding !important to the css rules, like so:
#myAppHere *{
padding: 0 !important;
margin: 0 !important;
etc....
}
but even this won't override some elements that have a style attribute with !important in the rules, such as when this happens:
<div id="myAppHere">
<div style="margin: 20px !important;">Hello</div>
</div>
You may be able to go into the other website's source with javascript, and strip out all style and class attributes... that's probably the only way to be sure. Something like this, if you're using jquery with your javascript:
$("#myAppHere *").removeAttr("style");
$("#myAppHere *").removeAttr("class");
Careful about removing those class attributes though, because it means that if you want to style it yourself, you won't have any classes to work with. You could add new classes in afterwards with more javascript though.
If you insert a complete HTML document inside a div element, the result has invalid markup in a manner that seriously messes things up. In particular, if the inner document has any style element, it will in practice be taken as applying to the page as a whole.
The solution is to stop doing that (and first consider whether you can legally do such things at all – it would normally constitute copyright violation). Technically, you would need to remove or rewrite much of the content of the document being embedded (there is no simple way to deal with CSS code in them or linked from them, for example), or to use an iframe element (or frame or object element) to embed a page as “autonomous” (so it will be displayed in an independent sub-window).
I have a div located on a page. The issue is that it inherits global styles form a style sheet (Stylesheet A) such as global ul and table styles however, I would like this single div not to do so. I require the div in question to only obtain its styles from another stylesheet (stylesheet B). Currently they are clashing.
Is there any way to do this without having to touch stylesheet A in any way? This is because stylesheet A controls all the major styles of my site and the site is big enough that a change is likely to break something. The div in question holds unrelated data to the site and therefore does not require stylesheet A.
I am using javascript Prototype if that helps? No Jquery please :)
What about using an iframe? is this a valid solution and how would it work?
All help is greatly appreciated.
Perhaps the easiest way to do this would be to simply figure out every style attribute that div inherits from stylesheet A, then manually override those styles with stylesheet B.
If you wanted to put the div into an iframe, that should work as well. You'd need that div to have its own HTML file, hosted on the same domain as the main page (otherwise you'll run into security issues). Link to stylesheetB in the div page, and it would work. You'd run into a few problems, though, in styling the iframe. Since you can't read CSS properties in child documents from a parent document, you'd have to make the iframe a fixed width and height, which is limiting in many scenarios. I guess you could let the iframe scroll, but that might not be want you want either.
I think the best way to do this is to use Chrome Inspect Element, or Firebug in Firefox to look at the CSS inheritances the div is receiving, then
Any repeated styles will always apply the last one read.
Suppose you have this style: .class { background-color: red; } in your stylesheet A, and this one in B: .class { background-color: blue; } .
So, if you are calling your stylesheet A before B:
<link href="sheet_a.css" rel="stylesheet" type="text/css" />
<link href="sheet_b.css" rel="stylesheet" type="text/css" />
Then the style applied will be .class { background-color: blue; }, because it's the last one the browser read.
Now, if this is not working (if your stylesheets are being called in a different order, or the style in A is more specific than the one in B, so A is still being applied), you can use the !important tag.
.class { background-color: blue !important; } will overwrite the style in A, as long as it doesn't have !important also in the original one.
If it's only one element you want to change, you don't necessarily need a new stylesheet. You can have the new style between <style></style> tags in the html head, or inline in the element ( <div style="background-color: blue;"></div> ). Inline elements have more relevance than those on external sheets.
You can use inline styles on the html structure or you can add !important on the rules that you want on stylesheet b to override styles on stylesheet a.
For example on stylesheet b you would do the following:
.element {background:red !important}
There is a html page customized with css styles(I cannot change this css). One tag of this page designed as a container for dynamic html data. How can I "reset" css settings for this div(css styles defined in the page have no influence on the content of this div)?
I have access only to dynamic html and I can add more css styles to a page.
If I understand you correctly the problem you have having is that the CSS for the main page is affecting the CSS for your "dynamic" div. For the most part there is nothing you can do about that, other than specifying higher-priority styles to the dynamic content you are loading.
You can do this by doing in-line css, or by doing other more specific CSS declarations in a file or tags.
The answer is not to "reset" the styles, but rather to SET the styles you want on the div, to override whatever the page styles throw at you. In your situation you'll need to either edit the style attribute, or modify the javascript style properties.
I have an external CSS file (I cannot change it at all) which I need to use in my HTML file, but I want the CSS to only affect a section of my HTML. (For example everything in <div id="externally_styled"></div>)
How is this possible, again, without changing the CSS file (and the CSS file contains also general styles that affect body tags etc)
You'd probably have to use an iframe with a page containing only the HTML you want styled and a reference to the stylesheet. This would mean the general styles wouldn't be applied to the containing page, but it sounds like that's what you want.
Any classes or style-declarations attached to a tag will override the declarations in the CSS-file.
Just add your own style-declaration to a tag:
<div style="<your own declarations>">
...
</div>
You can overwrite the general styles that you don't want to be applied to your HTML document. This may be a good idea if the CSS if not that extensive.
The way to overwrite an style is using the keyword important!.
e.g:
original stylesheet:
body {
color: #000000;
}
your stylesheet:
body {
color: #CCCCCC !important;
}
You can find more information here.
I'd guess any client side solution is going to be messy.
Can you use a server side solution where you suck in the external CSS file and append a class selector to the start of each rule? I'm sure this would be easy enough with regex.
One way that springs to mind is to have the "to-be styled" portion of your HTML exist in a completely separate file and then pull it in via an iframe that uses the CSS from the external file.
The only thing i can think of is to re-render the content from your DIV to an Iframe.
Either use classname of the class that you have created for your specific section or use proper parent child relationship css that will render only when it falls under the parent child relationship.
You can enforce style by using "!important" in your css codes.
take a look at this example.
http://www.craiglotter.co.za/2010/01/21/important-css-how-to-force-one-style-above-another/