Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

jueves, 20 de diciembre de 2007

HTML para correo electrónico

Convertir CSS a CSS inline para enviar HTML por correo


Los servicios de correo basados en webmail como Gmail o Hotmail no son muy amigables a la hora de interpretar las Hojas de Estilo cuando se definen entre etiquetas.
Por eso es que la mejor solución es escribir CSS inline, lo cual; puede no ser una práctica cotidiana.
La siguiente aplicación: Convert CSS Styles to Inline for Emails se encarga, como dice el autor, de "hacer el trabajo sucio".
Documento HTML con Estilos


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test CSS HTML</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>plain old paragraph</p>
<p id="biggens">This here is some huge text</p>
<p class="tinyred">All tiny and red</p>
</body>
</html>

Documento HTML con Estilos inline


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Test CSS HTML</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">plain old paragraph</p>
<p style=" margin: 11px 5px 3px 11px;
line-height: 1.5em; text-align: justify;
font-size: 75pt">This here is some huge text</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">All tiny and red</p>
</body>
</html>
Esto representa una buena utilidad para aquellos que escriben Newsletters o lleven a cabo un el diseño de un Stationary.
Para los ocupados y preocupados por las pautas y recomendaciones de W3C, les comento: si el código fuente original, es válido para el Servicio de Validación de Marcado de W3C, el resultado también lo es.
Share:

Publicidad

Estadísticas

A cotidiano, me siguen