Getting all css used in html file

Here's my solution :

var css = [];
for (var i=0; i<document.styleSheets.length; i++)
{
    var sheet = document.styleSheets[i];
    var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
    if (rules)
    {
        css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
        for (var j=0; j<rules.length; j++)
        {
            var rule = rules[j];
            if ('cssText' in rule)
                css.push(rule.cssText);
            else
                css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
        }
    }
}
var cssInline = css.join('\n')+'\n';

In the end, cssInline is a textual list of all the steelsheets of the page and their content.

Example :

/* Stylesheet : http://example.com/cache/css/javascript.css */
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
.javascript { color: rgb(172, 172, 172); }
.javascript .imp { font-weight: bold; color: red; }

/* Stylesheet : http://example.com/i/main_master.css */
html { }
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
a { color: rgb(204, 0, 51); text-decoration: none; }
a:hover { color: rgb(153, 153, 153); text-decoration: none; }
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
#header a { color: rgb(255, 255, 255); }
#menu_2 { height: 290px; }

/* Stylesheet : [inline styles] */
.hidden { display: none; }

Here is my solution:

function getallcss() {
    var css = "", //variable to hold all the css that we extract
        styletags = document.getElementsByTagName("style");

    //loop over all the style tags
    for(var i = 0; i < styletags.length; i++)
    {
        css += styletags[i].innerHTML; //extract the css in the current style tag
    }

    //loop over all the external stylesheets
    for(var i = 0; i < document.styleSheets.length; i++)
    {
        var currentsheet = document.styleSheets[i];
        //loop over all the styling rules in this external stylesheet
        for(var e = 0; e , currentsheet.cssRules.length; e++)
        {
            css += currentsheet.cssRules[e].cssText; //extract all the styling rules
        }
    }

    return css;
}

It is based on @bobince's answer.

It extracts all the css from both the style tags and the external stylesheets.

For inline stylesheets, you can get the content out of the normal DOM like with any other element:

document.getElementsByTagName('style')[0].firstChild.data

For external, linked stylesheets it's more problematic. In modern browsers, you can get the text of every rule (including inline, linked and @imported stylesheets) from the document.styleSheets[].cssRules[].cssText property.

Unfortunately IE does not implement this DOM Level 2 Style/CSS standard, instead using its own subtly different version of the StyleSheet and CSSRule interfaces. So you need some sniff-and-branch code to recreate rules in IE, and the text might not be exactly the same as the original. (In particular, IE will ALL-CAPS your property names and lose whitespace.)

var css= [];

for (var sheeti= 0; sheeti<document.styleSheets.length; sheeti++) {
    var sheet= document.styleSheets[sheeti];
    var rules= ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
    for (var rulei= 0; rulei<rules.length; rulei++) {
        var rule= rules[rulei];
        if ('cssText' in rule)
            css.push(rule.cssText);
        else
            css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
    }
}

return css.join('\n');

From Mdn:

const allCSS = [...document.styleSheets]
  .map(styleSheet => {
    try {
      return [...styleSheet.cssRules]
        .map(rule => rule.cssText)
        .join('');
    } catch (e) {
      console.log('Access to stylesheet %s is denied. Ignoring...', styleSheet.href);
    }
  })
  .filter(Boolean)
  .join('\n');