Blog   /   CSS Basics: A Beginner’s Guide to Stylizing HTML
CSS Basics for Absolute Beginners

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

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 your DOCTYPE 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 syntax CSS requires a selector to make a declaration. The example below shows the CSS syntax that selects all <h2> elements: 
h2 {
}
The declarations go inside the brackets and will style all element tags matching the name of the selector (here, 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 and internal apply CSS styles to the entire document. Inline applies CSS styles to only a particular 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.
After all is said and done, your CSS link for external styles should look a little something like this: 
<link href=”yourstylesheetname.css” rel=”stylesheet” type=”text/css”>

A few last words on linking

The href 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 a DOCTYPE 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>
Let’s take the example above. By nesting our paragraph declarations within <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>
You can add declarations for any content element you’d like. Let’s go a little crazy: 
<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>
It doesn’t matter what order you list them within the <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 the style 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=
This is your basic setup for adding inline styles to a tag. At this point, you can choose what style(s) to add to each element. Just keep them all within the same set of quotes and use a ; to separate them and close out the attribute, like so: 
<p style=”font-size: 15px; color: blue; font-family: Georgia;”>Content</p>
Unlike using external or internal styles, inline styles don’t require brackets or an individual line of code for each declaration.

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 the class 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 {
}
The class attribute value is "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;
}
Any of them can be added to the element’s class attribute in the HTML: 
<h1 class=”highlight under”>Content</h1>
<p class=”highlight eleven”>Content</p>
Keep each value within the same 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 an id 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>
The id selector on the style sheet will be set up like this: 
#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>
And the CSS: 
h2 {font-style: bold;
}
.title {font-style: underline;
}
Since the .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 your h2 elements have a .highlight selector, you can target those in a style sheet with: 
h2.highlight {
}
This would only apply the styling to 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>
The class would be denoted as usual, .weekday, followed by a space and td: 
.weekday td {
}
Easy peasy, right?

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;
}
This will target the 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>
And this CSS: 
h2.highlight {
color: blue;
}
h2 {
color: green !important;
}
This tells the HTML to render all 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.
Test Your Email First!

These workarounds may help you fix some spacing problems, but even the slightest code change could throw off an entire email design. That’s why it’s important to test every, email every time. With Sinch Email on Acid, you can preview your design more than 100 popular clients and devices, so you know how your email will look before it hits the inbox. Try us free for 7 days and see for yourself.

Start Testing Today

Latest Articles

Sinch Email on Acid logo - green envelope with checkmark
What is Email on Acid and What are the Alternatives?
Notes from the Dev logo teal
Notes from the Dev: Use the Word Rendering Engine to Enhance Outlook Emails 
email testing value - rotating coin with dollar symbol
Email Testing: The Risks, Costs, and Benefits Explained