CSS Basics: A Beginner’s Guide to Stylizing HTML
A thoughtfully-designed email can reap stellar rewards. How do email marketers achieve this? With killer CSS. You don't need to be the best CSS coder in the world, but a working knowledge alongside a go-to reference guide can definitely help get you there. To start picking up the basics of how to code in CSS, it's easiest to first have a baseline knowledge of HTML. You can find part one of the coding tutorial series here: Part I: HTML Basics Back Pocket Guide for Beginners Having an HTML and CSS reference guide is going to be helpful as you get deeper into coding for email and stylizing content. As most non-coder email marketers know, the day will come when you'll have to touch your email’s code. We can almost guarantee it. Never fear, that’s why we’re creating this series. Sit back, get comfortable, and enjoy the ride. If at any point you want to jump around or bookmark where you left off, select any section below:
Table of content
-
01
What is CSS? - What are style sheets?
-
02
CSS Basics - CSS Syntax
-
03
Where does CSS live in an HTML document? - External CSS
- Internal CSS
- Inline Styles
-
04
CSS .Classes - Using more than one class
-
05
CSS #ID Tags -
06
The CSS Hierarchy - Using more than one selector
-
07
An !important Lesson -
08
CSS will never go out of style
What is CSS?
CSS, short for “Cascading Style Sheets,” is a style sheet language that tells a browser (or email client) how to present an HTML document, or any other markup language. A CSS document is built on a hierarchy, which is what “cascading” refers to. The most general style parameters are applied throughout an HTML document, while the more specific ones are only applied to the individual content elements they reference.What are style sheets?
A style sheet is a template of font and layout settings to apply a standardized (or branded) look and feel to HTML documents. A brand can create their own, but so long as yourDOCTYPE is present, default style sheets will apply styles when a custom style sheet isn't specified.
CSS Basics
If you want to know how to modify your content’s font, font size, colors, line height and spacing, images, element positioning, you name it, CSS is your bff. Ultimately, CSS is a means of stylizing HTML content. If HTML content alone is a freshly-built house, the CSS is the furnishings, décor, amenities and everything else extra that turns it into a home. It spruces up HTML content to make it aesthetically pleasing and engaging.CSS Syntax
First, let’s go over the jargon. In CSS, you have a selector, declaration, property and value. The selector is the element’s tag name you’re applying styling to:h1, p, img, a (hyperlinks) are all examples of elements you can format.
A declaration is the style parameter you set. If you’re telling <p> tags to render in the color blue, that is a declaration. If you’re telling <table> tags to use 10px of cellspacing, that is also a declaration.
Property and value go hand in hand. The property is what type of style you’re declaring: font-family, font-size, color, line-height, etc. The list goes on and on. The value is the specific styling, so for font-family: Helvetica;, the value is Helvetica. For font-size: 20px; the value is 20px.
Basically, the property is on the left side of the declaration’s : and the value is on the right. When you have several declarations, separate them with a ;.
CSS requires a selector to make a declaration. The example below shows the CSS syntax that selects all <h2> elements:
h2 {
}h2).
Where does CSS live in an HTML document?
CSS and HTML are two different languages, yet both can be used in the same document. There are three ways to incorporate CSS:- Externally, where a stylesheet file (most likely with a .css extension) is linked near the beginning of the HTML document.
- Internally, in which a
<style>tag is nested in the<head>tag. - Inline, by adding the
<style>or<id>attribute inside an individual HTML element.
External CSS
If you’re the type of person who doesn’t like different foods on your plate touching one another, external CSS may be your best option. Linking a .css file keeps the style sheet separate from an HTML document but still pulls in and applies the appropriate formatting to each HTML element. Without linking them, an HTML document can’t read the style sheet and styles won’t render. It’s very simple to link a style sheet within an HTML document. You’ll need the<link> tag, which is self-closing, so no </link> is necessary. Within <link>, be sure to include all three attributes:
- href is where to include the style sheet’s file path (aka the link).
- rel is shorthand for the relationship between the HTML and CSS documents (this can just be
"stylesheet") - type denotes what you are linking to, whether it’s a .css file, an online style sheet, etc. If you’re linking to a file, the value must be
text/css.
<link href=”yourstylesheetname.css” rel=”stylesheet” type=”text/css”>A few last words on linking
Thehref can either be a URL or file path to the style sheet. The key ingredient here is that the style sheet must live on the brand’s domain, for email or web. This ensures the link to the style sheet in the HTML document doesn’t break (like it will if the style sheet is kept on a personal desktop).
Once your style sheet is uploaded to your domain, you can grab the URL or file path (we recommend file path, as it’s a bit more reliable). Happy linking!
How to make a style sheet
Browsers already have default CSS style sheets to reference when none are specified so long as aDOCTYPE is present. But you can always create a custom one that matches your look and feel.
The good news is it’s easier than it sounds.
Use any text editor (there are plenty of free ones available) to start creating your style sheet. Save it as a .css document.
All of this is to say that style sheet documents don’t need to be set up like HTML documents with all the opening jazz at the beginning. Rather, the first line of your style sheet should be the beginning of your first declaration:
p {
font-size: 15px;
color: blue;
font-family: Georgia;
}Internal CSS
If you want all elements of a certain tag to have uniform formatting but don’t want to create a brand spanking new style sheet, simply nest the<style> tag inside the <head> tag, so that <style> is a child of <head>, like so:
<head>
<style>
</style>
</head><head>, it will apply those styles to every paragraph throughout the HTML document. Here, that means that all paragraphs will be rendered in Georgia, size 15px font and blue. The code would resemble this:
<head>
<style>
p {
font-size: 15px;
color: blue;
font-family: Georgia;
}
</style>
</head><head>
<style>
p {
font-size: 10px;
color: blue;
font-family: Georgia;
}
h1 {
font-size: 30px;
font-family: Helvetica;
}
table, th, td {
font-size: 15px;
color: green;
line-height: 16px
}
</style>
</head><head> tag. As long as they’re all there, each style will be applied to its corresponding element throughout the document.
Just assume that any content tag you use in HTML can be stylized with the appropriate CSS.
Inline Styles
Inline styles allow you to stylize a specific element in an HTML document, so they do look a little different from internal styles (but not by much). Instead of nesting a tag within a tag, you directly apply inline styles to an open tag using thestyle attribute.
To start, let’s say you want to add styling to a single paragraph, <p>. An inline style would only require adding the style attribute to the <p> tag:
<p style=; to separate them and close out the attribute, like so:
<p style=”font-size: 15px; color: blue; font-family: Georgia;”>Content</p>CSS .Classes
So, we’ve established you can select an HTML element by tag, but that’s not all. Since HTML tags can include attributes, there’s one attribute in particular you can also use to select HTML elements. This is called theclass attribute.
Think of a class attribute like an anchor or jump link on a web page. A jump link is a hyperlink that takes you to another spot on the same page using a matching keyword or phrase. That’s similar to how the class attribute works. You assign the tag’s class attribute a value, usually a descriptor, like this:
<h2 class=”purple”>Content</h2>h2 is the tag where we added a class attribute and gave it a value of "purple". Now, we need to anchor .purple to the style sheet. We do this the same way we did with element tags, only to indicate that this is a class attribute we’re selecting, it needs to have a period before it:
.purple {
}"purple" and .purple is the CSS selector. The CSS selector and the class attribute value must match.
Classes are efficient CSS selectors because they add styling in one fell swoop to any element with the matching attribute value. Otherwise, you’d have to manually add the styling to each individual element. With classes, simply add the value to each element’s class attribute and anchor it to its matching selector in the style sheet.
One thing to keep in mind: class attribute styles supersede element styles on a style sheet, since they’re more specific in the content they target.
Think of it this way: when you set styles for the <p> element, you’re setting what is essentially the default style of all <p> elements. When you add, say, class=”blue” to a single <p> element, that direction is more specific, which is why it supersedes the default element style.
Using more than one class
Fasten your seat belts, things are about to get weird. Classes are certainly helpful to target elements for styling, and even more so when several different elements require the same styling. If we have these styles on a style sheet:.highlight {color: blue;
}
.under {text-decoration: underline;
}
.eleven {font-size: 11px;
}class attribute in the HTML:
<h1 class=”highlight under”>Content</h1>
<p class=”highlight eleven”>Content</p>class set of quotes "" and use a space to separate them. You have full creative liberty with the value you choose, so use whatever words or descriptors will be most helpful for assigning styles to elements.
CSS #ID Tags
You can add style to a single element block with anid attribute, which works very similarly to the class attribute. This comes in handy when only a single content block in an email needs a particular styling. The only difference when using an id attribute instead of a class is that the id selector on the style sheet needs a # before it.
Say we have this line of code:
<h3 id=”subhead”>Content</h3>#subhead {property: value;
}The CSS Hierarchy
Remember how we said the word “cascading” in CSS refers to the style sheets’ hierarchal structure? Tag<>, class, and id selectors represent that hierarchy. CSS applies the most general styles first and then the more content- and block-specific styles after.
That’s why we said a .class declaration will override a tag declaration, and why an #id declaration will override a .class. For example, take the HTML:
<h2 class=”title”>Content</h2>h2 {font-style: bold;
}
.title {font-style: underline;
}.title CSS selector is more specific than the h2 selector, that style will take precedence. Same thing if we were to add an id attribute, that #id style would take precedence over the .class style.
An id is as specific as you can get in CSS, so it’s not recommended to use the same id attribute across elements. Stick to a class attribute when multiple elements need the same styles.
The only way to supersede an id style is to have another id style listed. The most recently added one will supersede all others. Well, there is another way to supersede #id selectors, but we’ll go into that in a bit. Let’s just say, it’s “important”.
Similarly, if you have competing styles that rank the same in specificity, the most recent style will apply. For example, if you end up assigning two class selectors that are each assigned a different color to a single heading, the most recent color addition will be the one that takes effect.
Using more than one selector
There may come a time when you need to target all elements that include certain selectors.Coupled Selectors
To do that, you simply combine each in the fashion they are normally written. For example, if a couple of yourh2 elements have a .highlight selector, you can target those in a style sheet with:
h2.highlight {
}h2 elements that have the class="highlight" attribute. Notice how there’s no space between the tag and class selectors.
As far as the style sheet hierarchy goes, coupled selectors supersede .class selectors, but not #id selectors. Remember, this is because an id should only apply to a single element, whereas this example can target several elements.
Nested Selectors
It’s the same idea for targeting content elements within other elements. If there’s a table row with table data cells that need styling:<tr class=”weekday”>
<td>Sunday</td>
<td>Monday</td>.weekday, followed by a space and td:
.weekday td {
}Unrelated Selectors
Similarly, you can apply the same styles to multiple unrelated selectors. This simply allows you to avoid typing the same styles across different selectors, and it’s as easy as a comma:h1, .list, #callout {
background-color: coral;
}h1 elements, class="list" and id="callout" attributes, regardless of their relationship to one another in the HTML, and apply a coral background.
An !important Lesson
Again, CSS is a hierarchy. In the hierarchy of CSS, you have tags > classes > ids > and now, !important.
The !important indicator supersedes any previous styles. The cool thing here is that it doesn’t have to be its own declaration in the style sheet, but rather can be tacked on to individual attributes.
So, let’s say you have this code:
<h2 class=”highlight”>Content</h2>h2.highlight {
color: blue;
}
h2 {
color: green !important;
}h2 attributes in green, even if there is a more specific selector in place. The h2.highlight coupled selector would supersede the h2 selector normally, but the !important; addition makes h2 supersede h2.highlight.
Notice how !important sits between green and ;.
CSS will never go out of style
Sorry, couldn’t help ourselves. We love a good coding pun. If you have any questions around any of these concepts, want to share your own CSS tricks and hacks, or even if you have coding puns of your own, share them in the comments! Want a sandbox to practice your CSS in? Download any of our free templates, upload it into our Email Editor tool, and start practicing internal and inline styles. As always, whether you're playing around with new code techniques or not, content check every part of your email and run a test. No one has ever uttered the words, "I really wish I hadn't tested my email." This post was created with the help of Codecademy and W3Schools.
