Sometimes, it is easier to design pages by specifying CSS rules for each distinct HTML element, for example:

But this practice, while saving time and removing the need for meticulous planning in the early stages of a project, can prove troublesome later on, when you try to make your code more standards-compliant and, well, elegant. Enter the styles-to-classes converter.

 

The converter is a simple online application that presents you with three text fields: one for the input of the "mixed" initial code, and two fields where the separated HTML and CSS are presented as a result. The resulting CSS rules are listed as classes and can be linked as an external CSS file from the converted HTML document.