Question

I wonder if there is a service where I can “clean-up” html-code so that all inline style=”” attributes get transformed into css rules and replaced with respective class=”” attributes.
For example I’d like to get from this code (file ‘test.html’):

<!-- test.html -->
<div style="width:600px;margin:auto;padding:10px 0px 10px;cursor:pointer;color:#336699;font-style:italic;font-size:18px;" 
              onClick="toggleText('addmessage')">
    <span style="border-bottom:1px dotted #336699;">
Add message</span>
</div>
<div id="addmessage" style="width:600px; margin:auto;padding:10px 0px 10px;display:none;">
... etc.

somethig like this:

<!-- test.html -->
<div class="class_1" 
              onClick="toggleText('addmessage')">
    <span class="class_3">
        Add message</span>
</div>
<div id="addmessage" class="class_2">
... etc.

plus css file:

<!-- style.css -->
.class_1, .class_2 
{
    width:600px;
    margin:auto;
    padding:10px 0px 10px;
}

.class_1 
{
    cursor:pointer;
    color:#336699;
    font-style:italic;
    font-size:18px;
}

.class_2
{
    display:none;
}

class_3
{
    border-bottom:1px dotted #336699;
} 

Answer 1

http://www.tinytool.net/96002/inline_css_extractor