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

Tantalizea Lacaden
Tantalizea Lacaden
1,890 Points
Posted by Tantalizea Lacaden
Tantalizea Lacaden
1,890 Points

Does CSS in emails really have to be that redundant?

In the HTML Email Design video, there's h1, h2, h3 {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}` and the classes are also grouped and given `{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}

Is it really necessary if it's already a heading?

Yosef VanTine
Yosef VanTine
8,880 Points
Yosef VanTine
Yosef VanTine
8,880 Points

Your question isn't very clear. It might be better if you post the whole css code. what classes are also grouped? The headings are not using classes they are targeting all the h1, h2, h3 elements directly. If you are wanting to do something like so: h1, h2, h3, .classOne, .classTwo { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} that is fine. Sorry if I'm not understanding your question I haven't watched the video :) I would suggest if I haven't answered your question then post all the css.

3 Answers

nik
nik
8,925 Points
nik
nik
8,925 Points

The heading tags all specify that the text inside will be bolded and enlarged. But not defining the font style may cause your headings to look different across different platforms (i.e. one heading type in a round style and the other in a generic). It looks redundant but the purpose is to make sure the fonts displayed will show in uniform even if some styles are not available across different computers or devices.

Tantalizea Lacaden
Tantalizea Lacaden
1,890 Points
Tantalizea Lacaden
Tantalizea Lacaden
1,890 Points

That makes sense. It's just a lot of styles!

I feel like I'm thinking too much and I'm getting myself confused. If h3 has a parent that already has a style, I guess it's just email best practice to add the same style to the h3 again to have everything inline?

Tantalizea Lacaden
Tantalizea Lacaden
1,890 Points
Tantalizea Lacaden
Tantalizea Lacaden
1,890 Points

Does the code also have the be written the long way like padding-top: 10px; padding-right: 20px; ... or can it be padding: 10px 20px?

Nick Weight
Nick Weight
1,890 Points
Nick Weight
Nick Weight
1,890 Points

Simple answer to all this is that the more specific you can be with styles the better, hence it is better to not use shorthand. Email clients vary in the way they render A LOT. The idea is to make a bullet proof email that forces them to render as best as possible with little variance.

nik
nik
8,925 Points
nik
nik
8,925 Points

If you're trying to specify a font for all the heading tags, I believe you can group them to make it easier.

h1,
h2,
h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

That will ensure that all your h1 thru h3 headings use that font.

As far as padding you can use padding: 10px 20px; to shorten it up. But mind that if you only set two values, the first will set the top and bottom while the second value sets left and right. If you put four values then the order is top, right, bottom then left.