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?
Div with external stylesheet?
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. –
Guardianship
So an IFRAME within my div? I can do that but then how do I affect only the IFRAME then? –
Schlesien
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>
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 –
Schlesien
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. –
Guardianship 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>
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. –
Schlesien
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! –
Separator
It doesn't seem like
<style scoped> is supported anymore. See the following: https://mcmap.net/q/205773/-what-is-the-current-state-of-the-quot-scoped-quot-attribute-for-the-style-element-in-html5 –
Please 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?
It doesn't seem like
<style scoped> is supported anymore. See the following: https://mcmap.net/q/205773/-what-is-the-current-state-of-the-quot-scoped-quot-attribute-for-the-style-element-in-html5 –
Please 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" />
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? –
Schlesien
Are you writing your web application in basic HTML and javascript, or are you using another system? –
Guardianship
basic HTML and javascript yes –
Schlesien
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. –
Guardianship
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. –
Schlesien
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.
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/
You could assign a CSS prefix to target the section of your document you want to style.
scoped is a good idea, but has browser compatible issue.
I solve this problem by adding pre-class before all selector in css file:
© 2022 - 2024 — McMap. All rights reserved.