Div with external stylesheet?

Question

I have been given an external stylesheet (.css file) that may not altered in any way whatsoever. However I need to apply this stylesheet to a single div and therefore the co

Answer 1

I assume that the style specifications inside the external file are not contained in classes or IDs, but are they blanket adjustments to tags like <p> (and thus it cannot be included in your page headers). Include your div in a <style scoped> tag and import the .css file there. See: http://css-tricks.com/saving-the-day-with-scoped-css/

Answer 2

If you can work with HTML5, you could try using scoped styles. You could include the CSS inside the div, having it affect only its parent:

<div>
    <style scoped>
        // Styles here
    </style>
</div>

Answer 3

This will helps you a lot:

http://css-tricks.com/saving-the-day-with-scoped-css/

Applies only style to a certain delimited escope. Good luck!

IMHO better than the iframe solution..

related: Limit scope of external css to only a specific element?

Answer 4

I suggest you can leave the external style sheet as it is and create an internal style sheet with the classes that you want from the external stylesheet to affect your single div and just rename it and apply those renamed classes to the div. The renaming is because the attributes of those classes may affect elements already existing on the page from external stylesheets.

<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>

Hope this helps.

Answer 5

You could assign a CSS prefix to target the section of your document you want to style.

Answer 6

scoped is a good idea, but has browser compatible issue.

I solve this problem by adding pre-class before all selector in css file:

https://github.com/ericf/grunt-css-selectors