12

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 contents of the div in my already existing webpage. I am currently reading the contents of the stylesheet as text into a blank style tag (using .innerHTML) within the div I need to affect but this still affects the entire web page rather than just the single div. Could someone please help with this?

Improve this question
2
  • CSS affects the whole page. The only way I know to isolate that, so that it affects only a specific part of the page is to use an IFRAME. Commented May 3, 2013 at 10:40
  • So an IFRAME within my div? I can do that but then how do I affect only the IFRAME then? Commented May 3, 2013 at 10:42

8 Answers 8

Reset to default
12

The IFRAME solution works like this:

In your main HTML file, you'll have your DIV:

<div id="myspecialdiv">
    <iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>

Style that as you need it. The divcontent.html file should be a complete HTML file, including the content of the DIV tag, and a LINK using your external stylesheet:

<html>
    <head>
        <link rel="stylesheet" href="path/to/external/stylesheet.css" />
    </head>
    <body>
        <!-- The contents of your DIV -->
    </body>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

say that I am given a number of external stylesheets. how would I go about linking them all to divcontent.html at runtime? I'm busy working on a web application that constantly gets new .css files
That depends on your runtime, the language you're using to develop the web application, the framework on which it is based, and the architecture of your application. But there is no requirement that the divcontent.html file actually be HTML - it could be any file that constructs HTML (eg: PHP, aspx, etc). The answer gives you the concept - you'll have to adapt it to your specific requirements.
6

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>
Improve this answer

3 Comments

Seems like an amazing solution but it doesn't fit my needs seeing as the scoped attribute is not supported in any of the major browsers yet.
I want to link to external CSS files and it seems can't be done inside <style scoped> tag, something like @import "external.css"; not know and not work!
It doesn't seem like <style scoped> is supported anymore. See the following: stackoverflow.com/a/45692033/5245952
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?

Improve this answer

1 Comment

It doesn't seem like <style scoped> is supported anymore. See the following: stackoverflow.com/a/45692033/5245952
2

If you have access to server-side scripting (eg: PHP), you could create a script that loads the external stylesheet, and appends a class name in front of every entry. Then apply this class to your DIV tag. So, if the CSS includes:

p { font-size: 12px; }

You'd modify that to:

.mydiv p { font-size: 12px; }

And format your DIV as

<div class="mydiv">...</div>

You would then load the script as a stylesheet, rather than the external stylesheet directly.

<link rel="stylesheet" href="path/to/internal/script.php" />
Improve this answer

5 Comments

This seems to be a very viable solution. I don't know much about PHP though so how would one append the class name infront of each entry?
Are you writing your web application in basic HTML and javascript, or are you using another system?
basic HTML and javascript yes
How you modify the CSS file depends quite a lot on the format of the CSS file, and the reliability of that format. You may be able to get away with using regular expressions, or you might need to build yourself a CSS parser. Or something in between.
Got my solution by using the IFRAME as you suggested previously. I'm still very new to web dev and this application is my first undertaking so thank you very very much for all the help.
1

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.

Improve this answer

Comments

0

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/

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.