CSS Styling Basics

Email Coding 101, Module 2 of 5. CSS is what makes emails look good, but in email the rules are different.

What is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton of an email, CSS is the skin and clothes: it controls colors, fonts, sizes, spacing, borders, and backgrounds. A CSS rule has two parts: a selector (what to style) and declarations (how to style it).

p {
  color: #333333;
  font-size: 16px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin-bottom: 16px;
}

Common CSS properties

• color and background-color — text color and background fill
• font-size and font-family — text size and typeface
• padding and margin — space inside and outside an element
• border and width — the outline and how wide an element is
• text-align and display — alignment, and block, inline, or none

Selectors cheat sheet

p selects all paragraphs, h1 all H1 headings, .classname elements with that class, #idname the element with that ID, and a:hover a link under the mouse. Many email clients ignore class selectors and pseudo-selectors.

Inline vs. Embedded Styles

This is the number one difference between web CSS and email CSS. On the web, CSS lives in a separate file or a style block in the head. In email that is unreliable, because many clients, especially Gmail, strip style blocks entirely, and the content loses its styling.

Inline styles, written in a style attribute on each element, survive everywhere: Gmail, Outlook, Yahoo, and Apple Mail.

<p style="color: red;">This text WILL be red</p>

That is why email code looks verbose compared to web code: every element needs its own style attribute with all its styles written inline. Tools like kinetic.email handle this complexity for you.

The Box Model

Every HTML element is a rectangular box. CSS controls three layers of space around its content:

• padding — space inside the border; breathing room around the content.
• border — the visible outline, with a width, style, and color.
• margin — space outside the border; pushes the element away from its neighbors.

The module shows a box styled with 24px padding, a 3px solid border, and 32px margin, alongside the rendered result and an annotated diagram.

Coming Up Next

You now understand HTML (structure) and CSS (styling). Next: why email developers still use tables from the early 2000s, and the one email client responsible.

Next: Why Email Uses Tables | Back to Email Coding 101