How do I disable all css styles from the parent site inside an iframe, so it remains completely unstyled of the parents css.
You can't do this with parent site
Assuming that iframe content coming from your domain, and you can change in that.
So you can do this with Css reset
You have to include css file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.17.2/build/cssreset/cssreset-min.css">
And add your CSS after the user's CSS, so that yours is evaluated last. Then, reset the CSS on your elements by giving them a class attribute like this:
class="yui3-cssreset"
If it's on the same domain (cross-domain security will prevent you from making any changes otherwise), you could use jQuery to select the style blocks and links to CSS:
Just point the selector at your iFrame and remove the style and links from the document:
$('#myFrame').contents().find('head link').remove();
$('#myFrame').contents().find('style').remove();
In a single line:
$('#myFrame').contents().find('head link, style').remove();
That should clear up any CSS styles. If there are inline styles though - that will require more work.
Here's a working example:
http://jsfiddle.net/JohnSReid/qv6q6ed8/1/show/
Related
I am building a pagination from NG-Bootstrap pagination component. In that I want to change (actually remove) some CSS which is declared in NG-Bootstrap library. How can I do that without changing the NG-Bootstrap style sheet.
As shown in the above picture I want to ignore padding-left:0 which is declared in .pagination. I don't need to add another value for it.I just want to ignore it. Is it possible ... ?
To answer your question, no, you can't ignore a CSS styling rule. But you can override it without altering the NG-Bootstrap style sheet.
You can attach CSS rules to HTML documents in a few different ways, here are the most common:
Link to an external stylesheet by adding a <link> tag to the <head> section of your HTML document:
<head>
<link rel="stylesheet" href="mystylesheet.css" />
</head>
Embed the CSS into your HTML document with a <style> tag:
<style>
background-color: blue;
</style>
Add the CSS inline to individual HTML elements directly with the style attribute:
<div style="background-color:gray;"></div>
And depending on which way you do it, different styles will be applied depending on their precedence. Inline takes precedence over embedded, and embedded takes precedence over a linked stylesheet.
For example, if you specify a gray background on a particular element inline, and specify a blue background on that same element in the embedded style section, inline wins and the background will be gray.
So for your situation you could either embed the CSS or put it inline on the elements you want to change. Doing either of those will override what's in the NG-Bootstrap style sheet without altering it.
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.
I need to put an image background for the whole page. I use to do this applying the style to the body tag.
Just wondering if ss good practice to put a style to the html tag
Yea nothing wrong with it.You can put style to html tag.
Reference: http://www.w3schools.com/TAGS/tag_style.asp
http://www.w3.org/TR/REC-html40/present/styles.html#edef-STYLE
Sure. Actually, the html tag can be omitted in html5, so if you have it, you can sure use it for styling if you will. It has hardly any other purpose, so if it saves you from having to add an extra div, I think you should.
I normally add the height-property to the HTML-element, in order to make the background-image as large as possible. Don't forget to set the body's height aswell:
html {
height:100%;
}
body {
height:100%;
background:#000 url(your-image.png);
}
Yes, you can apply style to the HTML element. What's more, it doesn't even have to exist in your original HTML document (as is allowed in HTML5), e.g. this code below is fine:
<!DOCTYPE html>
<title></title>
<style>
html {
/* ... CSS properties go here ... */
}
</style>
The technical reason for this is because the <HTML> element is defined in the W3C specs as an implied element - basically user-agents must assume it is there, and all good UAs will append it to the DOM when rendering the web page.
Abu's answer, with respect, although in the context he is talking about is correct, is a misunderstanding of the question. Abu is referring to applying an inline STYLE attribute to the HTML element within the HTML document itself. I believe this question, on the other hand, is referring to using the html {} selector in an external CSS style sheet.
No its not recommended to use style tags inside HTML as styling should be taken care by CSS.
You shouls avoid it unless there requires a specific scenario where you want to dynamically set the style for some part.
But in that dynamic case also, I would recommend to create a class level style inside a CSS and then just add that class to the element while creation so that the required styles are applied.
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.