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 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?

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. — Gareth Cornish, May 03 '13 at 10:40
So an IFRAME within my div? I can do that but then how do I affect only the IFRAME then? — LethalPapercut, May 03 '13 at 10:42

score 12 · Accepted Answer · answered May 03 '13 at 10:53

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>

answered May 03 '13 at 10:53

Gareth Cornish

4,357
1
19
22

1

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 – LethalPapercut May 03 '13 at 11:17
1

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. – Gareth Cornish May 03 '13 at 11:37

score 6 · Answer 2 · answered May 03 '13 at 10:42

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>

answered May 03 '13 at 10:42

Piet van Dongen

1,629
10
13

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. – LethalPapercut May 03 '13 at 10:52
I want to link to external CSS files and it seems can't be done inside – QMaster Jul 10 '16 at 15:52
1

It doesn't seem like ` – amartin Jun 17 '18 at 20:34

score 3 · Answer 3 · edited May 23 '17 at 12:25

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?

edited May 23 '17 at 12:25

Community

1
1

answered Dec 02 '14 at 11:19

Javier del Saz

846
1
9
16

1

It doesn't seem like ` – amartin Jun 17 '18 at 20:35

score 2 · Answer 4 · answered May 03 '13 at 10:59

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" />

answered May 03 '13 at 10:59

Gareth Cornish

4,357
1
19
22

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? – LethalPapercut May 03 '13 at 11:19
Are you writing your web application in basic HTML and javascript, or are you using another system? – Gareth Cornish May 03 '13 at 11:40
basic HTML and javascript yes – LethalPapercut May 03 '13 at 14:47
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. – Gareth Cornish May 03 '13 at 17:01
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. – LethalPapercut May 03 '13 at 20:06

score 1 · Answer 5 · answered May 03 '13 at 10:47

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.

score 0 · Answer 6 · answered May 03 '13 at 10:43

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/

score 0 · Answer 7 · answered May 03 '13 at 10:45

0

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

answered May 03 '13 at 10:45

Morpheus

8,829
13
51
77

score 0 · Answer 8 · answered Jul 25 '16 at 06:33

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

answered Jul 25 '16 at 06:33

Fancyoung

2,313
26
32

Div with external stylesheet?

8 Answers8

Linked