Herramienta para Convertir Estilos CSS a Etiquetas en Línea

Definir estilos se puede hacer de dos formas. La primera y más usada es mediante un archivo externo, que en el HTML se incluye y adopta todas sus especificaciones. La segunda, no recomendable y poco usada, es definirlo en la misma etiqueta que queremos formatear mediante el atributo style; este modo se enuncia como etiquetas en línea.

Ahora bien, ¿nunca debemos utilizar CSS con etiquetas en línea? La respuesta es si; hay casos en los que las definiciones de CSS mediante archivos externos no funciona, y es necesario hacer uso de las etiquetas en línea. Tal es el caso de los email: Hotmail, Gmail, y otros proveedores de mails no toleran en un 100% las hojas externas de estilos en cascada (CSS).

Vía webintenta me encuentro con una pequeña herramienta que, luego de proporcionarle un trozo de CSS y HTML separados, es capaz de devolvernos lo mismo, pero con etiquetas en linea.

Veamos como funciona con un simple ejemplo; nosotros le pasamos el siguiente código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Probando CSS en línea</title>
<style type="text/css">
body {
margin: 25px 25px;
font-family: verdana, tahoma;
font-size: 10px;
color: #333333;
background: #ffffff;
}
p {
margin: 11px 5px 3px 11px;
line-height: 1.5em;
text-align: justify;
}
p#biggens {
font-size: 75pt;
}
p.tinyred {
text-align: center;
text-weight: bold;
color: red;
font-size: 9px;
}
</style>
</head>
<body>
<p>Parrafo clásico</p>
<p id="biggens">Esto sale muy grande</p>
<p class="tinyred">Rojo y chico</p>
</body>
</html>

La herramienta nos devolverá:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Probando CSS en l&Atilde;&shy;nea</title></head>
<body style="margin: 25px 25px;font-family: verdana, tahoma;font-size: 10px;color: #333333;background: #ffffff">
<p style="margin: 11px 5px 3px 11px;line-height: 1.5em;text-align: justify">Parrafo cl&Atilde;&iexcl;sico</p>
<p style="margin: 11px 5px 3px 11px;line-height: 1.5em;text-align: justify;font-size: 75pt">Esto sale muy grande</p>
<p style="margin: 11px 5px 3px 11px;line-height: 1.5em;text-align: justify;text-align: center;text-weight: bold;color: red;font-size: 9px">Rojo y chico</p>
</body>
</html>

Enlace: csstoinline