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/
Related
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.
Is it possible to dismiss one .css file for one table or div in the html, and for everything inside that tag.
I made some research but couldnt really find anything...
No, there is no way to exclude any elements from the styles of the page.
To keep the rules from applying, you either need to override each style for those elements, or change the selectors for the rules so that they no longer apply to that element.
In a preprocessor
table * {
//use some reset
//additional overrides if you need too
}
Best solution is to modify your rules, or worst use an iframe :/
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 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 wrote a HTML/CSS snippet that is included in some 3-rd party website.But CSS rules of that website make my snippet look terrible. To keep the snippet's appearance I must use !important keyword, but it's horrible, I have to write this keyword for about 1000 times (besides such a code looks not very nice).I can also use inline CSS instead of external .css file, but it's not a solution too.So, how can I protect my css styles in some elegant way?
The suggestion to use a div with a unique ID is good. However, there is a chance that other rules in the host page's style sheet use !important. Those rules would override yours, even if you use a unique ID.
Short of using an external document in an iframe in the first place (which is not always possible), using !important is the only 100% safe way that I can see.
Your snippet should be included inside an iframe.
It's the usual way these "widgets for 3rd party sites" work.
If you use an iframe, CSS from the parent document can't affect your "HTML/CSS snippet".
You can try enclosing your snippet inside a DIV with a unique id.
Then on your CSS for that snippet's style, include the id selector of the DIV for the items in your stylesheet.
The only way I can think of is to make the selectors more specific in some way. For example,
LI { color: red; }
LI.class { color: blue; }
<li class="class">I will be blue</li>
but you're really at the mercy of the 'rest of the CSS' you don't have control over.
I think your best bet is to put ID's and unique classes on all yoru stuff and spec the heck out of it. This is not great either though becuase you might WANT some of the 'rest of the CSS' to apply.
If you can't go with the iframe method, you'll need to figure out what level of specificity the parent page declarations have and beat that with your style declarations, keeping in mind that they'll still apply if you don't clear them. Otherwise, bring on the "!important"s!!! You may want to look for a clear.css or something as well that does this for you, as many sites offer this.