Clear div and its contents of any CSS styling

Question

This may be an odd question, but I'm trying to make a div that will act as a sort of preview pane for an HTML mail message in which I want to make sure all styles are done inline. So I'd like for the div and its contents to receive no styling from the outside page.

Is there a way to do this (in CSS or Javascript) or do I have to override every individual style that has previously been set?

I'll show some code, but that's kind of breaking what I wanted this question to be. For example, let's say I have a div:

<div id="somediv">
    <h2>Message Header</h2>
    <p>This is some content</p>
</div>

Since this div is a part of a larger page, it and its contents are subject to styling (such as margins, paddings, fonts, font sizes, colors, etc) from the surrounding page and any CSS files included. Is there a way to negate ALL of that styling rather than individually overriding them?

Why don't you use an iframe for that purpose? It won't inherit any styles. — Pavlo, Dec 20 '13 at 17:17

score 1 · Answer 1 · answered Dec 20 '13 at 17:20

I guess the closest you can get is to do some sort of CSS reset on everything within a given container, and then possibly try to re add some default-like margins and such till it looks "unstyled" again. And then take it from there with your inline CSS.

Another, completely different approach could be to display the mail in an iframe, in which there is no applied styling at all. Can probably be done, but might be a more complex thing to implement.

score 1 · Accepted Answer · answered Dec 20 '13 at 17:30

1

In the future, you reset all properties with all: unset declaration, but it's only available on Firefox 27+.

For now, you can put your "inner" content in a separate document and embed it via iframe:

<iframe src="content.html"></iframe>

content.html (minimum valid HTML5 document):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Content</title>
  </head>
  <body>
    <h2>Message Header</h2>
    <p>This is some content</p>
  </body>
</html>

answered Dec 20 '13 at 17:30

Pavlo

43,301
14
77
113

And if I want the iframe's html to be set via javascript? – nwalke Dec 20 '13 at 17:31
@tubaguy50035 `iframe.src = 'content.html'`, but this is out of the scope of this question. – Pavlo Dec 20 '13 at 17:33

score 0 · Answer 3 · answered Dec 20 '13 at 17:20

If you want to rewrite inherited CSS and not use the browser-default-CSS, you can add an !important behind every property. For example:

#noInherit {
    background-color: #fff !important;
}

I'm not sure if you can stop inheritance. Maybe someone else can give you a better answer.

score 0 · Answer 4 · answered Dec 20 '13 at 17:20

I don't believe you can remove all styles as there is no such thing as null in css. You can put everything to auto it one big dump

.noStyle{
    width: auto;
    height: auto;
    etc...
}

but I don't think that would get the effect you are after as it will just make the div inherit everything from it's parent(s). More detail about exactly what you are trying to accomplish might make it easier to help you find a workable solution but I don't think the question as currently posed is "solvable".

score 0 · Answer 5 · answered Dec 20 '13 at 17:32

0

You can use the negate selector. Just add :not before any CSS rule you don't want to apply on that div.

http://www.w3.org/TR/css3-selectors/#negation

Hard work if you do it manually, but you can automate it if you feel like. Note it will only work on modern browsers.

The other way is to use iframe. Not recommended.

answered Dec 20 '13 at 17:32

SRachamim

931
2
8
20

And why iframe is "not reccomended"? – Pavlo Dec 20 '13 at 17:34
This is probably one of a very small number of acceptable uses for an iframe. – nwalke Dec 20 '13 at 18:01
iframe isn't recommended because of bookmarks and navigation issues. Anyway, it's not bad as a default solution. My rule is: Don't use iframe if the url of the iframe may be changed. – SRachamim Dec 20 '13 at 18:17

Clear div and its contents of any CSS styling

5 Answers5