Generating a stylesheet based on inline HTML styling?

Question

I\'ve been working on styling different parts of my website for a while, however I have yet to put my inline styles into a stylesheet. I was wondering if a tool exists to parse

Answer 1

Here, I wrote a function to do it (the specificity won't be perfect, but it'll get you started):

function getInlineStyles() {
  var stylesList = "",
      thisElement,
      style,
      className,
      id;
  $("*", "body").each(function () {
    thisElement = $(this);
    style = thisElement.attr("style");
    className = thisElement.attr("class");
    id = thisElement.attr("id");
    if (id !== undefined) {
      stylesList += " #" + id;
    }
    if (className !== undefined) {
      stylesList += " ." + className;
    }
    if (id !== undefined || className !== undefined) {
      stylesList += "{";
    }  
    if (style !== undefined) {
      stylesList += style;
    }
    if (id !== undefined || className !== undefined) {
      stylesList += "}";
    }
  });
  return stylesList;
}

Answer 2

Try with Firebug. In CSS part you have something like this:

element.style {
border: 1px solid;
}

for <div class="block">

Just copy this in .block { } and that's it! It's not too easy, but it can help.

Answer 3

No, there isn't such tool. What do you do when there's more than one class? Or a class and an ID? Or an element who's a child of an element with an ID?

No, HTML is to complex to be parsed in this way to create efficient CSS code. You'll need to do so manually.

The general approach on this, is to take an inline-css heavy page, and download it locally. Then, reconstruct the page from scratch. The bright side is that you only need to do the CSS once. Once you have a global stylesheet, the rest of the pages will fall right into place.