CSS: formattare un messaggio e-mail in formato HTML

  • CSS
  • Gabriele Romanato
CSS: formattare un messaggio e-mail in formato HTML

Possiamo formattare un'e-mail HTML in un modo del tutto simile a quello usato per normali documenti HTML. Gli unici accorgimenti da prendere riguardano alcune unità di misura e il posizionamento del nostro file CSS. Vediamo insieme i dettagli.

Struttura di un'e-mail in HTML

Un'e-mail in HTML è un documento HTML in cui alcuni elementi possono venire omessi, come ad esempio:

  1. il DOCTYPE
  2. l'elemento title
  3. gli elementi meta

Per il resto si tratta di un normale documento HTML. Ecco il documento che useremo nel nostro esempio:


<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="email.css" type="text/css" media="screen" />
</head>

<body>
<div id="mail">
	<p id="notice">Se non visualizzi correttamente questa e-mail, clicca <a href="#">qui</a></p>
	<div id="header">
		<img src="image.jpg" alt="" />
		<h1>E-mail in HTML e CSS</h1>
	</div>
	<div id="content">
		<p>...</p>
	</div>
	<div id="footer">
		<h2>Offerte interessanti</h2>
		<div id="featured">
			<div class="featured">...</div>
			<div class="featured">...</div>
			<div class="featured">...</div>
		</div>
	</div>
</div>
</body>
</html>

Percorsi dei file CSS e delle immagini

In un'e-mail in HTML i percorsi ai vostri file CSS e alle immagini devono essere assoluti, ossia degli URL completi.

Applicare gli stili CSS

L'unico accorgimento per quanto riguarda gli stili CSS riguarda il dimensionamento dei font e degli elementi. I programmi utente che andranno a interpretare i nostri stili possono essere sia applicazioni online che client desktop il cui supporto alle specifiche CSS non è stato ancora definito con chiarezza. Per questo motivo nel codice che segue useremo i pixel anche dove sarebbe stato più opportuno utilizzare misure relative o fluide:


body {
	margin: 0;
	padding: 0;
	font: 14px Arial, sans-serif;
	background: #ccc;
}

#mail {
	width: 600px;
	margin: 20px auto;
	background: #fff;
	padding-bottom: 2em;
}

#header {
	width: 600px;
	height: 450px;
	position: relative;
}

#header h1 {
	margin: 0;
	padding: 1em 0;
	font-size: 2em;
	background: #d34545;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
}

#header img {
	display: block;
}

#content {
	line-height: 1.4;
}

#content p {
	background: #111;
	padding: 1em;
	font-weight: bold;
	color: #fff;
	letter-spacing: 0.1em;
	text-align: justify;
	margin: 0;
}

#content p:first-letter {

	float: left;
	font: 50px 'Arial Black', sans-serif;
	color: #ddd;
	padding: 4px 8px 4px 0;
	line-height: 0.8;

}

#footer h2 {
	width: 500px;
	height: 123px;
	margin: 1em auto;
	font-size: 34px;
	text-transform: uppercase;
	color: #fff;
	line-height: 118px;
	background: url(block-title.png) no-repeat;
	text-align: center;
}

#featured {
	width: 500px;
	margin: 0 auto;
	overflow: hidden;
	padding-bottom: 2em;
	border-bottom: 1em solid #d34545;
}

#featured ul {
	margin: 0;
	padding: 0 0 58px 0;
	background: url(confirm_icon.png) no-repeat 50% 100%;
	list-style: none;
}

#featured li {
	width: 80%;
	margin: 0 auto;
	display: block;
	margin-bottom: 1em;
}

#featured a {
	display: block;
	padding: 8px;
	background: #222;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-variant: small-caps;
}

#featured a:hover {
	background: #000;
	text-decoration: underline;
}

#featured div.featured {
	width: 32%;
	float: left;
}

#notice {
	margin: 0;
	text-align: center;
	font-size: 12px;
	padding: 4px;
}

#notice a {
	color: #008;
}

Quando la dimensione di un contenitore è definita già in pixel, le percentuali possono essere applicate con più sicurezza. In tutti gli altri casi occorre prudenza. Potete visionare l'esempio finale in questa pagina.

Ti potrebbe interessare anche

Torna su