Importing CSS inline

Question

I have the following line in my code in an attempt to load styling into an iFrame:

<iframe style='color:blue;margin-left:30px;@import('../../custom/courses/css/stylesheets/course.css'); />

There are two problems:

Is it possible to import code using the @import as I am attempting to do above
The html code in my browser outputs the following: <iframe style="color:blue;margin-left:30px;@import(" ..="" custom="" courses="" css="" stylesheets="" course.css');</iframe> So, my css url path is very messed up.

UPDATE

My code:

(function($){
    var cssLink = document.createElement("link") 
    cssLink.href = "../../custom/courses/css/stylesheets/course.css"; 
    cssLink.rel = "stylesheet"; 
    cssLink.type = "text/css"; 
    // frames['iframe'].document.body.appendChild(cssLink);
    jQuery('iframe.field-iframe-instance').css('border', '1px solid red');//.find('body').appendChild(cssLink);
})(jQuery);

The code on the iframe fails to take effect

Possible duplicate of [How to apply CSS to iframe?](http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) — Dekel, Jan 23 '17 at 01:16

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

You cannot do that way. You can either include the style in the iframe target source or you attach it through javascript. Check this out: How to apply CSS to iframe?

edited May 23 '17 at 12:33

Community

1
1

answered Jan 23 '17 at 01:12

MarkVI

1
1

You have a point but my code does not execute. Please see the code I added to my question – sisko Jan 23 '17 at 04:49

Importing CSS inline

1 Answers1