Posted on by

Free scrumptious Inline CSS Snippets for your email campaign

Free to usee CSS Snippet | Title image on purple background
CSS Snippets! Ripe for the taking!

Why use free inline CSS for your email campaign?

This post is a light-hearted free-for-all which shows, no… even allows you to take these CSS snippets for free for personal or professional use. Free inline CSS Snippets, here is why it is useful:

  • You don’t know what you are doing with certain CSS
  • Are in a mad hurry to get a project completed for a deadline
  • Can’t be bothered trying to work out your own code
  • Are so stuck you just don’t know what to do next, don’t worry, I feel your pain.

Also, in this post it covers a little bit about what is going on, if you have time to read it.

In-line CSS snippets

It is time to get some Free Inline CSS snippets into your work! This article has been written with responsive mailshots in mind, although there’s no reason why you couldn’t adapt the code for you CSS on your website it is mostly inline CSS. So casting my CSS magic wand I have created some snappy grabby inline CSS for you to copy and paste and do with as you please. Are you In a hurry? Just need to whack it together because the boss or client has given you a tight deadline? Well, this article is for you! As I have have already mentioned!

( Inline ) CSS Naughty Top Div Spacer

Need to add space at the top of the div to move text down or fake padding from the top? This crude but effective hack should do the trick! You barbarian!

    
//  Place this inside the parent div, or span you are trying to force down.  
 
 <div style="height:5px;"> </div>

Add this spacer div. change px height for your purpose, ideal for mailshots and serve!

Naughty inline spacer
Naught Div Spacer with Inline CSS

(another horrific way of doing it would be to a clear .png and change its height)
To use the div place the snippet inside the master div. <div> <spacer> </div>

CSS inline – Waist Size for Mailshots

For the purpose of responsive mailshots, this can set the bounding div width.
This will help make the width elasticated so when you come to viewing your email campaign on mobile it will constrain to the screen width… providing all the other elements are not forcing the mailshot outside the screen etc

<div style="max-width:640px;"></div>
Control the width of you CSS div with "max-width"
Max width CSS – Belt sizes!

Elastic Imagery | control image width with inline CSS

Like a magic trick, make your images adjust to the size of the mobile device or tablet. This can also be applied to desktop computers. Notice how the code needs to placed inside the image. 

<img src="/yourimage.jpg"style="max-width:100%; max-height:100%; display:block;"/>
Example of Inline CSS elasticated image snippet picture
Elasticated image = width 100%

QUICK Inline CSS snippet for E-mail Titles!

Feel free to amend the font family, point size, colour, better still you can change it to the proper heading tags :

Your Title / big text 

<h1 style="font-family: arial, sans-serif; color:#ff6600; font-weight:bold; font-size:60px; padding:3%; "> Title </h1>
Change you title with an Inline CSS Snippet
Inline CSS Title Snippet!

That’s all for now – 4 handy Inline CSS snippets for you to grab and run off with!

Thank you for reading this post. If you have a moment please feel free to share on social media, your blog or even your website. Free inline CSS Snippets

Or if you are feeling bit leisurely, you can browse other articles on this blog :
Such as :
– UI Design projects
– Tips on making a successful email campaign
– Php + HTML tut

Hey, if you are would like any assistance with your website design or graphic, feel free to get in touch or have a browse –