CODEWITHSUNDEEP
jqueryhtmlcss
n92
n92

Reputation: 7602

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

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.

Upvotes: 0

Views: 1269

Answers (2)

NoobEditor
NoobEditor

Reputation: 15891

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>

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

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.

Upvotes: 2

Related Questions