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.
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.
I have a page where I am reading an HTML from email.
Sometimes, the text which comes from the email has HTML and CSS and it changes my page style completely.
I don’t want my page style to be impacted because of this. How do I read the HTML and CSS strictly inside a particular div (box) and not let the page get impacted by this?
you have to write your css using some parent > child format. You might have to use !important.
May be you are using some kind of common selectors like "a", "p", "div". In these cases we can prevent the overriding by using parent class/id or with "!important.". I will not recommend the second one.
Ex. using parent className:
.parent-classname p{
/*style here*/
}
put that div in iframe so it behave like a seperate window so your html content not effected by loadded css.
You can use <iframe></iframe> tag instead of the <div></div>. Using Parent>Child Css format will also help make your styles more unique and protect them from being overridden.
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/
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 implement the Eric Meyer's reset.css in my website, and works great, but it was a little problem. As this a CMS users are free to format the content of their articles as they want and the reset CSS resets the formatting of their text.
Any ideas how we can prevent reset.css inheritance to propagate to the dynamic content?
All you input is more than welcome.
It will always propagate (that's kind of the point of reset.css :)), but if you're not already doing so, you should of course make sure that reset.css is the first stylesheet linked in your pages - any custom styles will then override the reset styles.
If the problem is that the styles are "too reset" and you'd like a more sensible set of defaults (e.g. weighted font sizes, margins, line-height etc.) for your dynamic content you could create your own baseline CSS styles and apply them only to the dynamic content area using an ID selector for example.
As Eric Meyer himself says on his CSS Reset page:
The reset styles given here are
intentionally very generic. There
isn't any default color or background
set for the body element, for example.
I don't particularly recommend that
you just use this in its unaltered
state in your own projects. It should
be tweaked, edited, extended, and
otherwise tuned to match your specific
reset baseline. Fill in your preferred
colors for the page, links, and so on.
In other words, this is a starting
point, not a self-contained black box
of no-touchiness.
By the looks of it, you're finding that the CSS Reset is doing a bit too much for you. I would therefore tweak it for the items you're experiencing problems with. For example, as you're experiencing problems with tables, I would either remove the parts of the CSS reset that target tables, thus leaving it at the browser default, or add extra CSS of your own after the reset to specifically style tables your own way.
I've had problems like that, my solution for that was to wrap the dynamic content generated by WYSIWYG editors, into a div with a unique class, where to that class I've created a reset style sheet with standard attributes!
Ex.:
div.wrap_to_prevent {style, style,
style}
div.wrap_to_prevent input,
div.wrap_to_prevent textarea,
div.wrap_to_prevent h1 {style, style,
style}
.
.
etc
Basically, I've used a reset style sheet, but preceded all css style's with the class of my div, that way, it just affects the code inside that div, thus creating a brand new set of rules for that content.
Since 90% of my projects use WYSIWYG editors, with this solution I was able to work around that same problem...
Can't tell if this works for you, but give it a try!!
Does the CMS create inline styles? If so these should override the styles from the reset.css file.
If the CMS includes it's own .css file, make sure that it appears after the reset.css file in your generated html output.
If you need to use the css reset, the only reliable way to work around this is to use an iframe element for the dynamic content. The main problem with iframe s is that they can't be automatically adjusted in height according to the inlying document's size. If you can work around that, I'd say this is the most hassle-free approach.