How to have a independent HTML div, in which the elements will not have any external styles applied

Question

I have a HTML page and an external style sheet

1) index.html 2) style.css

The structure of index.html as below

<html>
<head>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
      my content............
    </div>
    <div>
         <!--- HTML Content to be displayed here which will not get affected by any of the styles loaded in the page-->
         [html content]
   </div>
 <div>
      some content here also............
    </div>
  </body>
</html>

How to this, So that an block element will not get affected by any styles, only inline style will apply.

CSS does not work that way. A separate overlaid window is probably the best you can do to keep its own styles. Note your example is invalid HTML, as you should not have a `div` tag outside the `body` tag. — iCollect.it Ltd, Jan 23 '14 at 08:42
Or just overwrite ALL the styles you need, that is the way css works. — Esko, Jan 23 '14 at 08:43
@Esa: I think they are including content with its own styles included, possibly outside their control, and they do not want it affected by any page styling (which is currently not possible with CSS) — iCollect.it Ltd, Jan 23 '14 at 08:44

iCollect.it Ltd · Answer 1 · 2014-01-23T10:22:41.440

sigh... might as well post my comment as an answer as the answers (several deleted already) are getting a little silly now :)

CSS does not work that way. A separate overlaid window is probably the best you can do to keep its own styles.

A reset CSS script, as suggested by another (also now deleted), is only to ensure all browsers start with a common set of defaults and it cannot possibly know all the styles that may have been altered.

NoobEditor · Answer 2 · 2014-01-23T11:43:15.690

1

My answer goes way out of how you should include styles...but its worth a try if you have control on included css stylesheet!

You can inject a custom div just before the div from where you want the styles to reset..like :

<div class="reset_from_here_on"></div>

and then using the child selector (~), you can reset all the div after this div.reset_from_here_on to what ever way you want, keeping all of them in <body></body> and having the styles present in existing style-sheet!

jsfiddle demo

example markup

<div></div>
<div class="reset_from_here_on"></div>
<div></div>
<div></div>
<div></div>

css

div.reset_from_here_on ~ div{
    margin-top:20px;
    border:1px solid red
}

EDIT

AS TrueBlueAussie commeneted, if you have too much of style to reset, you can use yui library reset

include the stylesheet

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.14.1/build/cssreset/cssreset-min.css">

and just call the class .yui3-cssreset before the div from which you want the style to reset.for e.g:

<div class="yui3-cssreset">
    <!-- All reset styles go here...simple!! :)-->
</div>

edited Jan 23 '14 at 11:43

answered Jan 23 '14 at 09:00

NoobEditor

15,563
19
81
112

The intention is to ignore all previously set styles in the newly displayed div (which could be hundreds). This just lets you set styles from that point on, not reset them to blank (so they will be ignored). – iCollect.it Ltd Jan 23 '14 at 10:22
`yui library reset` will not help as again *that only sets specific settings to a common base value* and it *will not* erase all previous CSS in the page (which is what they want). – iCollect.it Ltd Jan 23 '14 at 14:25
@TrueBlueAussie : something is better than nothing... :) – NoobEditor Jan 23 '14 at 14:49
*sigh* Horse... Water... Nada :) – iCollect.it Ltd Jan 23 '14 at 15:21
@TrueBlueAussie : ...and btw, OP has vanished into 3rd world while we have been discussing since last 7 hrs!!! :D – NoobEditor Jan 23 '14 at 15:34

How to have a independent HTML div, in which the elements will not have any external styles applied

2 Answers2

EDIT