Hey, code masters! Welcome back to my “Code Like a Boss” series. If you’re joining us for the first time, feel free to refer to my previous entries, starting here. These should get you up to speed on some coding basics, specifically in regards to html for email.
In the last two entries, we’ve used some HTML best practices to set up our email foundation and layout a couple basic tables. Today, we’re shifting from structure to style in our first lesson on CSS. Let’s do it! In basic terms, CSS (Cascading Style Sheets) is a style sheet language that describes the presentation of an HTML document. CSS includes hundreds of stylistic properties (color, shape, size, placement, etc.) that help turn raw HTML like this (look familiar?)…
…into something more user-friendly, like this.
Before we learn how to apply CSS, we first need to know where. There are three ways to insert styles into your document. Let’s review them, shall we?
External
External style sheets are separate documents that contain only CSS. You can recognize them by their .css extension. To include an external CSS file in your HTML, use a link tag (<link></link>) in the head of your document, like this:
<head>
<link rel="stylesheet" type="text/css" href="path/to/mystylesheet.css">
</head>In this case, we are linking to a CSS file called “mystylesheet.css”. If we were to open this file, it would contain only pure CSS, like this:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}External style sheets are best used for larger web projects that contain multiple HTML pages. For instance, let’s say we’re building a website that has 50 different pages, and they all use the same CSS. If that CSS lives locally on each page, one simple style update would mean updating all 50 pages individually, which could lead to errors and inconsistencies. But, if we use an external style sheet and link it to all the pages, any modification to that style sheet would update all the pages that include it. It’s a great way to keep your code organized and reduce effort and risk.
Note: Since most webmail clients block links to external styles sheets, this is not a good option for email.
Internal
Internal style sheets are found directly on the HTML pages they correspond to. They’re typically used for email, landing pages or special pages within a larger web project that require unique styling. Internal styles are found in the head of your HTML page inside a set of style tags (<style></style>), like this:
<head>
<style>
body {
background-color: blue;
}
h1 {
color: orange;
margin-left: 40px;
}
</style>
</head>Anything between the style tags is specific to the HTML page on which it’s placed. If you find you’re using the same styles across multiple pages, an external style sheet is the way to go. Internal style sheets can be used for email, but sparingly and with caution. Some email/webmail clients (looking at you, Gmail) use preprocessors that strip out the internal CSS for security purposes, which can break your email. No fun.
Before we review the final CSS placement option, let’s take a closer look at the basic syntax, just to get you familiar with how it works.
The syntax is the same for both external and internal style sheets, and looks like this (thanks, W3schools):
With an external or internal style sheet, you need to use a selector, which tells the browser which element you want to style. In this case, we’re targeting all of the h1 headers (Side Info Nugget: headers come in different sizes ranging from 1-6. 1 is the largest, 6 is the smallest). Once we’ve selected our element, we have to state which property we want to set and then set the value for that property. In this example, we’re setting the color property to the value blue and the font-size property to the value of 12 pixels. Make sense? Awesome. Let’s move on to the final (and most email-appropriate) CSS placement option.
Inline
Inline styles are placed directly in your HTML tags and affect only that specific element. This placement option (in tandem with limited internal styles) is used primarily for email development, because it is accepted across the majority of email clients. The syntax for inline CSS is slightly different from the external/internal examples above. Here’s an example:
<h1 style="color: blue; font-size: 12px;">I’m the largest header.</h1>We don’t need a selector because we’re injecting the style directly into the element we want to change. In this case, we’re only targeting this specific h1 header, not all of them.
Next, we declare the style attribute and set it equal to any number of declarations. The declarations remain the same, always including property/value pairs separated by a colon and delimited with a semi-colon.
There are hundreds of CSS properties to choose from, and they all work together to adjust the way elements appear on the screen. W3schools has a great list to get you started. Have fun experimenting with these properties! It’s a great way to get familiar with basic CSS.
As always, feel free to reach out to me with comments/questions in the section below. I’d love to hear from you. Until next time, happy coding!
Share This
About the Author: Relationship One
