View Full Version : Can I use CSS with ASP?

01-13-2008, 07:40 PM

I have the following snippet of ASP script which needs tidying up with a little help from CSS. The problem is that I am not too sure where to start tidying it up.

myMail.Subject="Your message to company name"

myMail.HTMLBody="Your message." & vbcrlf & vbcrlf & _

"Please do not reply to this email" & vbcrlf & "<br><br>" &_

"<B><font face='verdana' size='2' color='navy'>Full name:</font></B> " & sname & vbcrlf & "<br>" &_

"<B><font face='verdana' size='2' color='navy'>Email</font></B>: " & sEmailAddress & vbcrlf & "<br>" &_

"<B><font face='verdana' size='2' color='navy'>Business</font></B>: " & sbusinessTitle & vbcrlf & "<br>" &_

"<B><font face='verdana' size='2' color='navy'>Country</font></B>: " & sCountryName & vbcrlf & "<br>" &_

"<B><font face='verdana' size='2' color='navy'>Message</font></B>: " & MessageTitle & vbcrlf

How would I begin to remove the following line and replace it with CSS:

<B><font face='verdana' size='2' color='navy

and how would I apply CSS to the text message after the two top lines (myMail.Subject and myMain.HTMLBody)?

At the moment it all looks a bit cumbersome and I would appreciate some guidance, please.

Many thanks.


01-13-2008, 08:14 PM
You can use CSS only in combination with HTML. ASP is for the server side scripting and CSS is only to style the HTML output after ASP has processed everything.

So, basically: WYSIWYCS – what you see is what you can style. :D If you view the output source code in your browser, that’s what CSS can style.

At first replace the deprecated HTML code that is generated by the function itself. You should have semantics (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) in mind when you think about the best markup. Since I don’t know what you intend it’s a little hard to say what you should do but you could use a definition list (http://www.w3.org/TR/html401/struct/lists.html#h-10.3).

So, it would probably look something like this (I don’t know how to write a new line in ASP… – also, the wrapping <dl> and </dl> tags are supposed to appear only once):


"<dt>Full name:</dt> <dd>" & sname & vbcrlf & "</dd>" &_

"<dt>Email</dt>: <dd>" & sEmailAddress & vbcrlf & "</dd>" &_

"<dt>Business</dt> <dd>: " & sbusinessTitle & vbcrlf & "</dd>" &_

"<dt>Country</dt>: <dd>" & sCountryName & vbcrlf & "</dd>" &_

"<dt>Message</dt>: <dd>" & MessageTitle & vbcrlf "</dd>"&_


Basically your output should look something like this:

<dt>Full name:</dt>
<dd>John Doe</dd>
<dd>Doe Inc.</dd>
… etc. …

And you style that list by creating a new CSS file and putting like:

dt {
font-weight: bold;
color: navy;
dd {color: green;}

… or something like this in it. Remember, you’re styling the HTML output, not the ASP code.

Then you link to tha CSS file in the head section of the HTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />

01-14-2008, 05:46 PM
Wow! That's very informative, Stephan.

I'll go through it and use it, but it seems to make sense.

Many thanks for your time.



01-17-2008, 03:46 PM
Hello Stephan

I have tried your code and though it looks tidier, it gives me, in my inbox:

<dd>Your message to graphic</dd>

Your message.
Please do not reply to this email

Full name:
Dimi Day




THURS test feedback1 FLA

That is, the titles and the content are on different lines as in:


and there are no colours or bold formatting. Please also note the <dd> as in:

<dd>Your message to graphic</dd>


I am trying to get it so that it looks more like this:

Your message to graphic

Your message. Please do not reply to this email

Full name: Dimi Day
Email: dim03@AOL.com
Business: business
Country: UK
Message: graphic TEST 14.06

The code I have at the moment is:

<style type="text/css">

dt {
font-weight: bold;
color: navy;
font-family: Verdana, serif
font-size: 10px

dd {
font-weight: normal;
color: black
font-family: Verdana, serif
font-size: 10px


and in the body of the HTML file I have:

myMail.HTMLBody="<dd>Your message.</dd>" & vbcrlf & vbcrlf & _

"<dd>Please do not reply to this email</dd>" & vbcrlf & "<br><br>" &_

"<dt>Full name</dt>: <dd>" & sname & vbcrlf & "</dd><br>" &_

"<dt>Email</dt>: <dd>" & sEmailAddress & vbcrlf & "</dd><br>" &_

"<dt>Business</dt>: <dd>" & sbusinessTitle & vbcrlf & "</dd><br>" &_

"<dt>Country</dt>: <dd>" & sCountryName & vbcrlf & "</dd><br>" &_

"<dt>Message</dt>: <dd>" & MessageTitle & vbcrlf & " </dd><br>"

Many thanks for your time.


01-17-2008, 04:10 PM
Hi Steve,

Well, after reading this thread again, I realized that I was a little sloppy with my advice. I just get that you seem to be trying yourself on an HTML e-mail, do you? The thing with HTML e-mail is that itís the least reliable thing that there is when it comes to markup and styling as different Mail applications have different (i.e. barely no) support for it.

Now, while itís not at all hard to get the title and related content next to each other (by floating the dts to the left and also clearing the floats) it might just be better to use a table here since this is the most widely supported structure by e-mail applications. So the respective code would be something like:

myMail.HTMLBody="<h1>Your message.</h1>" & vbcrlf & vbcrlf & _
"<p>Please do not reply to this email</p>" & vbcrlf & "<br><br>" &_
"<table><tr><th scope="row">Full name:</th> <td>" & sname & vbcrlf & "</td></tr>" &_
"<tr><th scope="row">Email:</th> <td>" & sEmailAddress & vbcrlf & "</td></tr>" &_
"<tr><th scope="row">Business:</th> <td>" & sbusinessTitle & vbcrlf & "</td></tr>" &_
"<tr><th scope="row">Country:</th> <td>" & sCountryName & vbcrlf & "</td></tr>" &_
"<tr><th scope="row">Message:</th> <td>" & MessageTitle & vbcrlf & " </td></tr></table>"

so that the output looks somewhat like this:

<th scope="row">Full Name:</th>
<td>John Doe</td>
<th scope="row">E-mail:</th>
<th scope="row">Business:</th>
<td>Doe, Inc.</td>
Ö etc. Ö

Also, support for external CSS is limited so although itís not as feasible the best is to style it with inline styles, i.e. add a style attribute to each cell an put the styles there like:

"<tr><th scope='row' style='font: bold 10px Verdana, Arial, sans-serif; color: navy;'>Email:</th> <td style='font: normal 10px Verdana, Arial, sans-serif; color: black;'>" & sEmailAddress & vbcrlf & "</td></tr>" &_

Youíll get the point. There are several articles on HTML e-mail and the doís and doníts on the internet. Basically there's not much choice so far.

01-19-2008, 12:16 AM
If you want some additional advice on HTML emails, there's quite a good free PDF guide at Mail Chimp (http://www.mailchimp.com/resources/email_marketing_guide.phtml) which I refer to on a regular basis.

Just hope and pray that you're not sending anything to anyone using Lotus Notes or MS Outlook 2007. They're just plain evil in the way they render HTML.

01-19-2008, 06:32 PM
Hello Stephan and Butlins

Many thanks for your posts (I have downloaded the pdf file, thanks, and at 65 pages it should make good bed-time reading).

I will try the code, Stephan, many thanks for your time, and post back to let you know how I get on!.