How to send emails in .NET part 7: adding style to HTML contents

In this post we saw how to build a simple HTML email with no styling. It looked a bit bleak so we’ll “dress it up” a little.

You cannot simply add a reference to an external CSS file like you would on a normal HTML web page. External references are ignored in the email body as they can can contain malicious material and code.

You can place CSS code directly in the HTML code in the following ways:

  • Using the style tag within the head section
  • Using the style attribute on individual elements
  • Using old-style attributes, such as cellspacing, border, width etc. on individual elements

All of these should be familiar from general web UI programming. Here’s an example of an embedded style tag in the head section:

string from = "andras.nemes@company.com";
string to = "john.smith@company.com";
string subject = "Testing html body";
string htmlBody = @"
<html lang=""en"">
	<head>	
		<meta content=""text/html; charset=utf-8"" http-equiv=""Content-Type"">
		<title>
			Upcoming topics
		</title>
		<style type=""text/css"">
			HTML{background-color: #e8e8e8;}
			.courses-table{font-size: 12px; padding: 3px; border-collapse: collapse; border-spacing: 0;}
			.courses-table .description{color: #505050;}
			.courses-table td{border: 1px solid #D1D1D1; background-color: #F3F3F3; padding: 0 10px;}
			.courses-table th{border: 1px solid #424242; color: #FFFFFF;text-align: left; padding: 0 10px;}
			.green{background-color: #6B9852;}
		</style>
	</head>
	<body>
		<table class=""courses-table"">
			<thead>
				<tr>
					<th class=""green"">Topic</th>
					<th class=""green"">Est. # of posts</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class=""description"">Using a Windows service in your project</td>
					<td>5</td>
				</tr>
				<tr>
					<td class=""description"">More RabbitMQ in .NET</td>
					<td>5</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
";
MailMessage mailMessage = new MailMessage(from, to, subject, htmlBody);
mailMessage.IsBodyHtml = true;
string smtpServer = "mail.company.com";
SmtpClient client = new SmtpClient(smtpServer);
client.Send(mailMessage);

The above message is rendered as follows in my MS outlook client:

Styled HTML body in email

It’s still not very corporate looking but now you at least know how to add styles to a HTML message in .NET.

Keep in mind that email clients are not as up-to-date with CSS code as modern web browsers, so not everything will work in an email.

Read all posts related to emailing in .NET here.

Advertisements

About Andras Nemes
I'm a .NET/Java developer living and working in Stockholm, Sweden.

7 Responses to How to send emails in .NET part 7: adding style to HTML contents

  1. Yogendra says:

    nice post..

  2. Sajan Dhakal says:

    Very helpful. But I need to insert a variable.
    How to insert a variable instead of “More RabbitMQ in .NET”?

  3. Buba says:

    Does not works, shows as plain text.

  4. Sugar Daddy says:

    Can you think of a reason why this might result in a blank email in Outlook?

    When I view source and then use the content to create an html page, it looks right, but the email comes through blank

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

ultimatemindsettoday

A great WordPress.com site

Elliot Balynn's Blog

A directory of wonderful thoughts

Robin Sedlaczek's Blog

Developer on Microsoft Technologies

HarsH ReaLiTy

A Good Blog is Hard to Find

Softwarearchitektur in der Praxis

Wissenswertes zu Webentwicklung, Domain-Driven Design und Microservices

the software architecture

thoughts, ideas, diagrams,enterprise code, design pattern , solution designs

Technology Talks

on Microsoft technologies, Web, Android and others

Software Engineering

Web development

Disparate Opinions

Various tidbits

chsakell's Blog

Anything around ASP.NET MVC,WEB API, WCF, Entity Framework & AngularJS

Cyber Matters

Bite-size insight on Cyber Security for the not too technical.

Guru N Guns's

OneSolution To dOTnET.

Johnny Zraiby

Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

%d bloggers like this: