Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design HTML Email Design Designing Email with CSS Applying CSS to the Content Blocks

Julie Vandebosch
Julie Vandebosch
10,360 Points
Posted by Julie Vandebosch
Julie Vandebosch
10,360 Points

Email with content in another background color than the body background?

I'd like to have the content of the email in a box that has another color than the body background, but I don't know how to this. The example in the video's has backgrounds that take up the entire width?

Here is an example: http://us5.campaign-archive2.com/?u=0bce0093f78868485d3d7e1ce&id=0928fc4ec8

4 Answers

Julie Vandebosch
Julie Vandebosch
10,360 Points
Julie Vandebosch
Julie Vandebosch
10,360 Points

Ok, I think I found it!

I gave a width of 600 instead of 100% to the #emailContainer and gave it a background-color. Then in the media query I gave it a width of 100% and max-width of 600px.

Aaron Martin
Aaron Martin
1,855 Points
Aaron Martin
Aaron Martin
1,855 Points

When working with HTML email design, you're going to have to worry about email client compatibility. Building your layout with DIVs, while perfectly acceptable in modern web design, isn't going to get you very far in most email clients.

To accomplish that design in as many email clients as possible, you're going to need to put everything inside of a table that has a background color set to white. Setting the body background color to grey will work for most emails, but some will strip that out anyway. For something a bit more universally rendered, create a table inside of your body that you treat as the body, and then set that to have a background of white, then nest all your content tables inside that.

For a full list of what will be compatible and where, Campaign Monitor has a grid: https://www.campaignmonitor.com/css/

Litmus will also render real previews in every conceivable client: https://litmus.com

Albert González
Albert González
22,953 Points
Albert González
Albert González
22,953 Points

You have to create a general div and give a different background color. In this div you can put all the content that you want!

Julie Vandebosch
Julie Vandebosch
10,360 Points
Julie Vandebosch
Julie Vandebosch
10,360 Points

Will the div work in all email clients? And where exactly do i put the div?