Well this article is going to be a quick example of a nice textarea styled with CSS. There is no reason why this should be hard to do, as it literally takes 2 minutes to put together.

Let’s get started. First we have our textarea:

Just a couple things to note here… First off, try and make sure there are no extra spaces between the start of the textarea tag and the end. In my experiences having any space will sometimes cause the textarea to be pre-filled with spaces, which is both annoying and confusing when you’re trying to fill out a form. Second, you almost always want to give your textarea an id, you’ll need it to target with the label.

Next up some CSS styles:

#commentBox {
     display: block;
     width: 400px;
     height: 120px;
     padding: 8px;
     border: 1px solid #cccccc;
     line-height: 130%;
     font-size: 13px;
}

What we end up with is a nice standard textarea that can be customized to fit whatever theme you need. It should look like the example textarea below:

So thats it! Only 7-10 lines of CSS for a basic but nice looking textarea. From here it would be really easy to customize this with background-images, fancy borders, different colors, jQuery hover states, or whatever else you think would look nice.

Step 1 – Get Thunderbird

For this example I’ll be using Thunderbird, a great open-source mail client put together by the same people who bring you Firefox. I’m sure you can use other mail clients to mail HTML email, but I really enjoy Thunderbird so that’s what I’ve decided to use. You’ll need to get everything setup before you can actually send any HTML email, but that’s really outside the scope of this quick walkthrough.

Step 2 – Craft Your HTML Email

The next step is to craft your HTML email. This is definitely the hardest part and I would highly recommend looking through tutorial before trying anything too fancy. Sitepoint has a nice little article on the subject, or if you’re feeling lazy you can grab a pre-fab HTML email template from Campaign Monitor.

Step 3 – Upload Images to a Public Area

If you’re using any images in your HTML email, you’ll need to find a place to host them online. If you fail to do this, all your images will show up broken. Ideally you’ll want to use your own hosting, but if you need a quick fix you can probably use a service like imgur to temporarily host them for you. Once your images are all online, make sure to change all the image paths in your HTML email. The image path needs to be absolute, which means you need to put in the full URL (ie. http://www.yoursite.com/email-images/your-image.jpg).

Step 4 – Use Thunderbird to Mail the HTML Email

Create a new message just like you normally would, but leave everything blank to start. From the top menu click Insert / HTML then paste in your HTML email. (click the images to see screenshots)

Create a Blank Message

Click Insert / HTML

Paste in Your HTML Email

And thats it! Start sending your HTML emails!