How to Include CSS in import.io Connect Extract - html

Question

Using import.io connector, I was able to extract a segment of html from the source web site. This result is returned as "html" type. The result is a single table of data with styles defined in the body html but not extracted. This resulted in the html segment extracted displayed with NO style and looking terrible.
Is there a way to INCLUDE extracting CSS styles, i.e. multiple css hrefs included in the source html, like
<link rel="stylesheet" href="http://cdn.ideamelt.com/1.3/css/ideamelt.min.css">
Also at the same time to include dynamic css like the following:
<style type="text/css">
#financials-iframe-wrap {
width: 635px
}
.td_genTable table {
border: none
}
tr.net {
font-weight: bold;
border-top: 1px solid #009EC2
}
.td_genTable td {
border: 0;
padding: 0
}
a.h3-link {
color: #ffffff;
text-decoration: underline;
float: right
}
</style>
... in the connector extract so that the resultant html segment can be properly styled and displayed?
Thanks in advance!

Answer 1

This is a fairly interesting use case.
You can extract the link and style elements as html using a custom xpath such as //link and //style
You can then output them into your page HTML and that will import the css documents from the pages and should include the styling.
(Be aware that the website in question may not want you to be taking their css and using it on a different website, so they may block downloads of css to websites hosted in different domains)

Answer 2

Sorry, I'm not familiar with Import.io.
Is there way to get refs from links and content from styles? Are you using javascript?
If so, then you may use the folowing js functions to include your styles into the target document:
// Include css from 'style' tag
function include_css (src) {
var _head = document.head || document.getElementsByTagName('head')[0] || document.documentElement,
style = document.createElement ('style');
style.setAttribute ('type', 'text/css');
if (style.styleSheet){
style.styleSheet.cssText = src;
} else {
style.appendChild (document.createTextNode (src));
}
_head.appendChild (style);
}
// Include css referred by 'link' tag
function include_link (ref) {
var _head = document.head || document.getElementsByTagName ('head')[0] || document.documentElement,
style = document.createElement ('link');
style.setAttribute ('rel', 'stylesheet');
style.setAttribute ('type', 'text/css');
style.setAttribute ('href', ref);
_head.appendChild (style);
}