CSS in an html formatted email is unreliable at best, use inline markup. Also, if you don't send images as attachments (very.bad.idea to do this) be sure to indicate the full URL to the image in the src.
There are ways of "doing it right" involving multipart emails and tweaking on your server/email program, but using the method you describe, a down and dirty email for both would be this.
You are seeing this plain text message
because your email program does not support
html. Please ignore the code at the bottom
or set your email program to read HTML emails.
<p>This is the html portion of the message</p>
The HTML comment <!-- --> is invisible to html viewers.
Like it, dislike it, html email is firmly ingrained in the output of emails, we have to deal with it.
In some forms, it's actually an improvement if not abused - you can format receipts in nice columns (tables, of course) instead of merrily dancing the order receipt down the left of the email.