I'm a web-dev newbie and I'm working on a webapp which displays html from other sources.
The main webapp is based on bootstrap and the other external html is embedded in a bootstrap modal. I want the modal content to look exactly like they would if they were a separate html page. Since the embedded html can contain elements that have been bootstrap stylized, any td, tr or table contained within the external html are stylized as well.
Is there a way to tell html something like "Within this div, don't use bootstrap styles?"
As an aside, since this is an internal framework and will be used by a few people, I'm not worried about xss exploits.
I don't know if I interpreted your question correctly. But I understand you want to make a div (or whatever element) not have bootstrap styles. You can then, override those styles using your own CSS stylesheet, applying new styles to that element along with the !important rule.
One solution is to prefix all bootstrap clases with something like .bt so the declarations ends up like:
.bt table
.bt input
.bt td
then to the main div (or body) of the site using bootstrap, add the bt class like <div class="bt">
Related
I would like to add a custom style or CSS to my Angular website elements without accessing the styles on the server or in another word how can I prevent the automatic access from global classes.
For example
<p>Something</p>
for the whole project the common CSS has been used. How can I prevent in order to use custom CSS. I am using it in Angular by having div with inner HTML styles.
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.
I want to preface this with the understanding that I'm aware this is sub-optimal for web design but my hands are tied.
I am working within my organization of my company to add documentation in an html format through a form field.
The html I am coding will be, essentially, inserted into the rest of the page's body and I don't have access to the style sheets or to the style tags in the header.
Right now I am embedding my css in the html but I would like to have a little bit cleaner code so, to the question at hand.
Is there a way to embed a second section under style tags where I can define IDs and classes in the body. I've tried to just put style tags in the body but it's conflicting with the header of the overall page.
Please let me know if more clarification is needed and thank you, before the fact, for any help!
Is there a way to embed a second section under style tags where I can define IDs and classes in the body. I've tried to just put style tags in the body but it's conflicting with the header of the overall page.
Multiple style tags are ok. When you have multiple style tags, the cascade rule applies, so you just need to make sure your selectors have higher specificity than the page's default style.
The second issue is of where you put the style tag. Strictly speaking, the <style> tag is supposed to go in the <head>, but in practice all browsers will apply <style> anywhere in the page. Having style in body, the page will not validate, however it will work fine.
I'm doing this, defining a <style>...</style> block within the HTML and it's working fine across the browsers I've tested (Firefox, IE10, Chrome).
What do you mean by "it's conflicting with the header of the overall page"? Is there a PHP error saying that their is an output and header can't be set (so the system seems like using ob_start/ob_flush)
Normaly following should work:
<body>
<style>
.class {
border: 1px solid #000;
}
</style>
</body>
Maybe some of the CSS given in the header using !important and make it impossible to overwrite or you just missing some attributes so it looks like you not changing anything at all.
You probaly could use this technik to load stylesheet dynamically into the header: How to create a <style> tag with Javascript
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);
or you creating a style element and fill it with styles, but this will be more complex, because you have to do it completly with Javascript and at some point it sucks.. also to have it clean a extra file would be perfect solution.
I like a directoy css or stylesheets (based on the directory pattern I am following, either short terms like img, css, js or long terms like scripts, images, stylesheets) and a default.css inside. It's your decision what you call it.
I'm in Wordpress... And I have a Wordpress theme with lots of css files included. Don't blame me please.
I want to use the powerful plugin "Gravity Form" but the theme contains many defined form tags and it make so bad...
===> So I want to reset all css code of input,select,buton tags etc... only inside the div CLASS "gform_wrapper". ["css_Div_Iframe" in fact xD]
Any Idea ?
Do you know how to do that ? Thanks.
If I understand you correct you would like to make specific styling to a specific including the elements inside this - am I right?
If so, it may be easier for you to add a specific class to that div, like:
<div class="specific"><p>My text</p><div>
Then you can use ordinary CSS to target that specific using for instance:
<style>
div.specific {background-color:#cecece;}
.specific p {font-size:16px;}
etc ...
</style>
If you get a CSS conflict you can overrule the CSS styles by adding !important to the CSS, like this:
div.specific {background-color:#bebebe !important;}
I have a simple HTML page with divs nested within each other. And then I have another HTML page which displays a grid. The grid is styled using a stylesheet. Now I want to embed this grid within the 1st HTML page. So I have created a div inside the 1st page and set the source as the 2nd HTML page (which contains the code for displaying grid).
Now the problem is, the stylesheet which was developed had the CSS selectors dependent on the structure of the 2nd Page. But now since I have embedded the code in the 1st file, I think the selectors and not getting applied and hence the grid not getting styled. How do I solve this problem ?
Maybe embedding the grid using an <iframe> would be acceptable for you. Then you would not have to change any CSS code.