Extract css styles from html document to external css file

Question

Is there a way to extract hardcoded styles in html documents to external css file ? If not, do you have an idea on how to do this? Have you ever done it before ?

Example, from:

<div style="background-color: red">
<a style="font-weight: bold"></a>
</div>

to

<div id='st-01'>
<a id='st-02'><a/>
</div>
#st-01 { background-color: red }
#st-02 { font-weight: bold }

Answer 1

Not exactly what you are looking for but if you don't mind copying and pasting your HTML, try this. Not too many features but it does the job!

http://extractcss.com/

https://github.com/peterlazzarino/Inline-CSS-Extractor

Answer 2

You can use some JS/JQuery code to extract the styles, clear them, give elements an ID and add up css. Check this example, you may extend it further.

$(document).ready(function(){
 var i = 0;
 var css = "";
 $("div,a").each(function(){
 $(this).attr("id","st-"+i);
 css += "#"+$(this).attr("id")+"{"+$(this).attr("style")+"}";
 $(this).removeAttr("style");
 i++;
 });
 $("style").html(css);
});

http://jsfiddle.net/d8TaJ/