Email Design Email HTML and CSS Coding 1 — Questions and Answers
Question 1: Why must CSS styles be inlined in HTML emails?
- To make the email code shorter
- Because many email clients strip <head> or <style> block CSS (Correct answer)
- To improve email deliverability scores
- To allow dynamic CSS changes after sending
Correct answer: Because many email clients strip <head> or <style> block CSS
Many email clients, including Gmail, strip external or head-level CSS, so inlining styles as style attributes ensures they are applied reliably.
Question 2: What does the cellpadding attribute control in an HTML email table?
- The space between table cells
- The space between the cell border and its content (Correct answer)
- The width of the table cell border
- The height of each table row
Correct answer: The space between the cell border and its content
The cellpadding attribute sets the space between a table cell's border and its content, providing internal padding inside each cell.
Question 3: What is the MSO conditional comment used for in HTML emails?
- To load Google Fonts in all email clients
- To apply special HTML/CSS only to Microsoft Outlook email clients (Correct answer)
- To add UTM tracking parameters to links
- To prevent images from loading in Outlook
Correct answer: To apply special HTML/CSS only to Microsoft Outlook email clients
MSO conditional comments wrap HTML that should only be read by Microsoft Outlook, allowing Outlook-specific fixes without affecting other email clients.
Question 4: What value should the border attribute be set to on email layout tables?
- border='1'
- border='2'
- border='auto'
- border='0' (Correct answer)
Correct answer: border='0'
Setting border='0' on layout tables removes default cell borders that would otherwise appear around each table cell, keeping the design clean.
Question 5: Which CSS display property value is NOT supported in most email clients?
- display: inline
- display: block
- display: inline-block
- display: grid (Correct answer)
Correct answer: display: grid
CSS Grid is not supported in most email clients including Outlook, so table-based or flexbox-alternative approaches must be used instead.
Question 6: What is the correct way to ensure a linked image in an email has no blue border?
- Set the image's color attribute to transparent
- Add border='0' to the <img> tag and border: 0 inline CSS (Correct answer)
- Use a CSS reset file for the email
- Wrap the image in a <figure> element
Correct answer: Add border='0' to the <img> tag and border: 0 inline CSS
Setting both border='0' as an HTML attribute and border: 0 as inline CSS ensures the default blue link border doesn't appear around linked images.
Email Design Email HTML and CSS Coding 1
Why must CSS styles be inlined in HTML emails?