Style Formatter organizes your html and css and formats it so you can paste it into an existing page without the css getting overwritten.

Additionally, Style Formatter can be used to clean up and format existing html and css.

The example below is a straight copy of Google's 1998 homepage with a red background added. After formatting, any or all of the html and css can be easily edited and pasted into an existing site with its own styles and still look the same.

Like the navigation bar a site uses? You could use this to quickly isolate the element and play with it.

Add IDs to all Elements
Adds an ID to any tag that has none

Rename Element Ids
Renames all element IDs to a unique one starting with "sm..."
(Note: will ignore any ID starting with "sm...")

Move CSS out of HTML
Moves inline CSS from the HTML textarea to the CSS area

No CSS Tag Classes
Puts all CSS tag classes into custom named CSS classes (Example: "div { }" -> ".smXXX123 { }")
(Note: html, head, body, and tbody tags can be implied if missing)

Remove Unused CSS
Removes CSS styles if ID or class is not in the HTML

Rename CSS Classes
Renames all element classes to a unique one starting with "sm..."
(Note: will ignore any class starting with "sm...")

CSS

HTML

<title>Google! Search Engine</title>

</head>
<body bgcolor="#FFFFFF">
<form method="GET" action="/search-1998.html">
<center><img src="image/google1998home.jpeg" width="351" height="113"><br>
<table border="0" cellspacing="0" cellpadding="5" width="70%">
<tbody><tr><td bgcolor="#EEEEEE">
<center>
Search the web using Google!<br>
<input type="text" name="q" value="" size="40"><br>
<select name="num" style="
    display:  none;
">
<option value="10" selected="">10 results</option><option value="30">30 results</option><option value="100">100 results</option></select>
<input type="submit" value="Google Search">
<input type="submit" name="sa" value="I'm feeling lucky"><br>
<i>Index contains most of the internet's pages (soon to be much bigger)</i>
</center>
</td></tr><tr><td>
<center>
<h2><a href="/about-1998.html">About Google!</a></h2>

</center>
</td></tr>

</tbody></table>
</center>

</form></body></html>

Style Formatter

CSS

HTML

Preview