Generating a stylesheet based on inline HTML styling? - html

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 an HTML file and generate a stylesheet from it. For example, here is a snippet of my website:
<div class="block" style="border:1px solid">
<img id="profile-pic" style="float:left;border:0px"/>
</div>
And I would like to be able to generate this:
.block {
border: 1px solid;
}
#profile-pic {
float: left;
border: 0px;
}
Does something like this exist?

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.