Styles

What is it?

Now we have reset our base styles we can start to build in our own styles to the email. The boilerplate has many predefined styles to make editing your email styles quick and simple.

Basic font usage

Firstly set your master font.

Do not apply any font styles, such as font-size to a <td> element, this can cause adverse issues in Outlook 2016.

Boilerplate line 52

/*=== Choose Master Font ===*/
h1, h2, h3, h4, h5, h6, p, ul, li, ol, td, span{font-family: Arial, sans-serif;}

Body Font

The body font is set up for paragraphs and list elements. There are a couple of ways to approach writing a paragraph; either in a <p> tag, or our preferred method is to use a <span> element with the class tag 'p'. You need to use <br> tags in-between paragraphs to space these out.

Boilerplate line 56

/*=== Setup Body Font ===*/
span.p, span.p a, p, p a, span, span a, ul, li {color:#000000; font-size:15px; font-weight:300; line-height:130%; text-align:left;}

Header Fonts

Now we have set up the body font we can set up heading fonts styles. These are h1 through to h6. Similar to the body font, we also use the <span> element with a class of 'h1' through to 'h6'. Edit the font colour, size, weight, alignment and more here.

Boilerplate line 59

/*=== Setup other font Styles ===*/
span.h1, span.h1 a, h1, h1 a{color:#000000; font-size:35px; font-weight:700; line-height:130%; text-align:left; text-decoration: none;} 
span.h2, span.h2 a, h2, h2 a{color:#000000; font-size:30px; font-weight:700; line-height:130%; text-align:left; text-decoration: none;}
span.h3, span.h3 a, h3, h3 a{color:#000000; font-size:25px; font-weight:700; line-height:130%; text-align:left; text-decoration: none;}
span.h4, span.h4 a, h4, h4 a{color:#000000; font-size:20px; font-weight:700; line-height:130%; text-align:left; text-decoration: none;}
span.h5, span.h5 a, h5, h5 a{color:#000000; font-size:15px; font-weight:700; line-height:130%; text-align:left; text-decoration: none;}
span.h6, span.h6 a, h6, h6 a{color:#000000; font-size:10px; font-weight:700; line-height:130%; text-align:left; text-decoration: none;}

Links, lists and line breaks

Ensuring a pointer style of cursor on <a> links helps ensure a better user experience. By default we have removed text underline, but you can turn this back on if you wish by adding the class name 'underline'.

Unordered and ordered lists have default styles set up in the Cogentro boilerplate. Without these, layout issues can occur in some email clients, so ensure to keep the values as they are, other than the left padding if you wish to increase or decrease it from 15px. In Title and Meta, we cover the conditional code for Outlook to fix list spacing.

Boilerplate line 68

/*=== Links, Lists and Line-Breaks ===*/
a {cursor: pointer; text-decoration: none;}
ul, ol{padding: 0px 0px 0px 15px; Margin: 0px 0px 0px 0px;}
li{Margin: 10px 0 10px 0px 0px; list-style-type:round;}
br {line-height: 100%;}
a.underline{text-decoration: underline;}

Brand Colors

Setup you brand colours for quick reference. You can add these classes to typography elements in your email, or just refer back to them.

Boilerplate line 76

/*=== Setup Colors ===*/
.white{color: #ffffff}
.black{color: #000000;}
.primary{color: #1064D5;}
.secondary{color: #17DCA8;}
.tertiary{color: #4A0772;}

Images

Setting images to 'display: block' can fix you a lot of headaches with layout issues. If you do require an image to be inline, just add the 'inlineIMG' class name. Removing the border and text-decoration will prevent any unwanted underlines below any image elements that are links.

Boilerplate line 84

/*=== Images ===*/
img {display: block !important;}
img.inlineIMG {display: inline-block!important;}
a img {border: none !important; text-decoration: none !important;}

Disclaimer and Copyright

At the end of many emails are disclaimer and copyright wording. Using the class 'small' on p or span elements will give it a smaller, more suitable font size.

Boilerplate line 90

/*=== Disclaimer and Copyright Wording ===*/
span.small, span.small a, p.small, p.small a{font-size:12px;}

Buttons

Buttons are widely used in email campaigns. The Cogentro button is built to be flexible and robust. It adapts to the size of the text content it holds. The btn_box properties define the container styles of the button. The btn_text properties define the text style within the button.

There are button class options for rounded corners as well as light/dark color preferences.

Also, button hover properties that you can customise are shown below.

You can learn more about the Cogentro button, with examples here.

Boilerplate line 94

/*=== Buttons ===*/
.btn_box{padding: 12px 18px; line-height: 15px; background-color: #345CFF;}
.btn_box_rounded{border-radius: 3px;}
.btn_text{font-size: 15px; color:#ffffff !important; font-weight:500; text-decoration:none;}
.btn_box_white{background-color: #ffffff;}
.btn_text_dark{font-size: 15px; color:#345CFF !important; font-weight:500; text-decoration:none;}


/*=== Buttons Hover ===*/
.btn_box, .btn_text {transition: all 100ms ease-in;}
.btn_box:hover, .btn_text:hover {background: #1542FC !important;}
.btn_box_white:hover, .btn_text_dark:hover {background: #DFE5FF !important;}

Email Container

Now we come to defining the properties for the email structure, starting with the outer container.

Firstly, define the email background colour. This will take up 100% of the width and height of your email.

You can also define the space at the top of your email, before your content begins. We've used 20px as a default.

Boilerplate line 108

/*=== Email Container ===*/
body, #bodyTable{background-color:#EEEEEE;} /* Change email background colour*/
#emailContainer{width:100%;}
#bodyCell{padding-top: 20px;} /* Spacing at top of email */

Email Blocks

Now comes the spacing setup of your main email content. We've added in 20 blocks to start with. Each block spacing is default setup to 0px padding.

Adjust the section padding top and bottom, e.g. .Section1Padding to space it out from the block above and/or below it.

Adjust the section content padding, e.g. .Section1Content to add padding around an individual column. .Section1Content defines the first column in a block.

Only use padding in <td> elements. Do not use margin in a <td>, or do not use padding in any other element or it might not work cross email platform.

If you need to add more than one column to a block, simply name it something like .Section1Content2 and add the styles as you did for the first column.

You can find more on adding columns to layouts here.

Boilerplate line 114

/*=== Email Blocks ===*/
.Section1Padding{padding-top: 0px; padding-bottom: 0px;}
.Section1Content{padding: 0px 0px 0px 0px; background-color: #ffffff;}

.Section2Padding{padding-top: 0px; padding-bottom: 0px;}
.Section2Content{padding: 0px 0px 0px 0px; background-color: #ffffff;}

.Section3Padding{padding-top: 0px; padding-bottom: 0px;}
.Section3Content{padding: 0px 0px 0px 0px; background-color: #ffffff;}