Convert inline CSS elements to classes or external stylesheet

This utility extracts inline CSS elements from a webpage or a chunk of HTML and converts the style definitions into classes / a stylesheet ready for use.

If your webpage contains a lot of inline CSS elements, and you want to clean up the HTML and place the styling in a "real" stylesheet, this is the timesaving tool you need. The usage and functionality is quite simple and straightforward (see example below or read the "manual") :

Example

HTML with inline CSS elements :

<div id="table-container" style="width:500px;background-color:#ebebeb;border:1px solid navy;">
  <table id=mytable style="width:100%;border-collapse:collapse;">
    <tr>
      <td style="word-wrap: break-word; background-color:yellow;">
	  Lorem ipsum dolor sit amet
      </td>
      <td style="word-wrap: break-word; background-color:red;">
       consectetur adipisicing elit
      </td>
    </tr>
  </table>
</div>

Is converted to these stylesheet classes :

/* <div id="table-container" style="width:500px;background-#ebebeb;border:1px solid navy;"> */
div#table-container {
   width:500px;
   background-color:#ebebeb;
   border:1px solid navy;
}

/* <table id=mytable style="width:100%;border-collapse:collapse;"> */
table#mytable {
   width:100%;
   border-collapse:collapse;
}

/* <td style="word-wrap: break-word; background-color:yellow;"> */
td.style1 {
   word-wrap: break-word;
   background-color:yellow;
}

/* <td style="word-wrap: break-word; background-color:red;"> */
td.style2 {
   word-wrap: break-word;
   background-color:red;
}

In the example above, you can now insert the generated stylesheet in a <style> ..<style> section, or place it in a external stylesheet by <link rel="stylesheet" type="text/css" href= .. and take the CSS classes in use when it is suitable.