Plunging into the world of coding can seem daunting if you’ve never done it before, and email coding in particular has its own set of rules. If you’re new to coding, here are some things to consider before diving straight into HTML and CSS for email.
Do I Need to Code My Email?
If you don’t have coding experience, coding an email from scratch may not be a practical solution for you and it is certainly not required. VerticalResponse provides a wide selection of mobile-friendly templates and offers a drag and drop editor so you can customize our ready-to-go templates with your own content.
If you have experience and some level of comfort using or learning HTML, then coding a custom email template could be a great option. But coding an email is different from coding a web page or website. As with coding for a web page, you will still need to consider browser and device behaviors. In addition, you will need to consider the unique style defaults of dozens of email clients like Gmail, Yahoo!, Outlook, and more. If you are used to coding a web page in HTML and applying an external CSS style sheet, you’ll need to get used to working with CSS internally and inline so that your styles are not overwritten by these email client defaults.
Vocabulary
If you are brand new to coding altogether, here’s what you need to know about HTML and CSS:
HTML is a language you’ll use to structure and describe your content. HTML stands for Hypertext Markup Language. When you code in HTML, you are marking up your content with tags so that these tags can be called upon for presentation and behavior.
CSS is a language that affects the presentation of your content. Using CSS, you can assign styles to HTML elements. CSS stands for Cascading Style Sheet. The word cascade is significant because style declarations, or rules, will be honored by order of appearance. If you make two declarations for the same element, the latter will be honored because it overwrites what comes before it.
Here are the ways to tie your CSS to your HTML:
External CSS = using an external stylesheet (a file commonly named style.css) that is referenced within your HTML file. This is great for websites because if you have 100 common elements that span over 100 pages, you can change them all at once with a single CSS declaration.
Internal CSS, aka Embedded CSS = including your CSS code within