Copying a blog post from a separate word processor only to see your CMS wreak havoc on your formatting is beyond frustrating. Worse still, when you’re writing a post and you don’t have control of the final formatting, it reflects poorly on you.
Luckily, formatting blogs with inline CSS is not as hard as it looks. With inline CSS, you gain control of your formatting, regardless of where your writing is published.
Getting Started with Inline CSS
We’ll cover:
- Line Spacing
- Paragraph Width
- Paragraph Spacing
- Header Sizes
You’ll need to know a few HTML elements and CSS properties, plus how to use HTML tags. We can easily cover that here.
If you already know what properties and elements are, you can skip to the section on Line Spacing and Paragraph Width.
Here are the elements and properties we’ll cover:
-
- Headers
- Divs
- Paragraphs
- Font-size
- Margin-bottom
- Max-width
- Line-height
What are HTML Tags and CSS Properties?
Take a look at this raw code. Then scroll down to see what the raw code turns into when I copy and paste the code into a text editor.
<div>
<h1>This is my h1 header</h1>
This is my first paragraph
<h2>This is my h2 header</h2>
This is my second paragraph
<h3>This is my h3 header</h3>
This is my third paragraph
<h4>This is my h4 header</h4>
</div>
This is my h1 header
This is my first paragraph
This is my h2 header
This is my second paragraph
This is my h3 header
This is my third paragraph
This is my h4 header
Don’t worry if nothing’s making sense yet.
First let’s break down how to use tags. We’ll start with the header tag and the paragraph tag.
Every tag is made up of an opening tag and a closing tag. All the content within the opening and closing tag will be affected by the tags. Like so:
<h1>Header</h1>
Paragraph
Header
Paragraph
To apply styling to our header and paragraph, we have to use what are called “CSS Properties.” This is done inside the opening tag. See below.
<h1 style="font-size:3em;">Header</h1>
The key thing to notice is the [style=”font-size: 3em;”] that I’ve added to the header tag. (Brackets added for emphasis.)
This is the syntax you need to use every time you apply CSS inline styling. Don’t worry about what font-size or 3em mean just yet. The syntax is what’s important.
Let’s look at a comparison of two headers. The second header uses the h1 tag without any styling. The first uses the h1 tag with inline styling.
Header
Header
Both of these use the same h1 header tag, but the first one uses inline CSS to make the text appear larger.
Now let’s break down what I did with the inline CSS to make this happen.
By adding style=”font-size:3em;” I added a “CSS property,” called “font-size,” so that I could adjust the font size. Pretty simple right?
In the beginning of the post, I said we’d cover five CSS properties: font-size, margin-bottom, max-width, and line-height.
For every one of these properties you’ll need a number, like 3em. You can also use px (pixels), but ems are considered best practice because it allows your text to scale responsively on mobile devices.
I’ll provide more info on why you want to use ems in the notes at the end of this post.
Line Spacing and Paragraph Width
The easiest way to control your line spacing is to wrap all the content you write in a div tag. Then apply the styling to the div. Your paragraphs will inherit the spacing you apply to the div.
Here’s the syntax to control line spacing:
<div style="line-height: 1.5em;">Your content goes here.</div>
We’re not quite done with the div tag though. We can also control our paragraph width by applying the max-width property to our div tag.
You can apply both the line-height property and the max-width property to a single div tag like this:
<div style="line-height: 1.5em; max-width: 32em;">Your content goes here.</div>
By wrapping all your content in this tag, with this inline CSS, you ensure that your spacing looks good. And your paragraph width is set to a maximum of 32ems so it stays within the 60-75 character width limit for optimal readability.
Header Sizes
To control the size of your headers, you simply apply the font-size property. You can do this on every header.
<h1 style="font-size: 4em;">Header 1</h1>
<h2 style="font-size: 3em;">Header 2</h2>
<h3 style="font-size: 2em;">Header 3</h3>
<h4 style="font-size: 1em;">Header 4</h4>
Paragraph Spacing
To control spacing after a paragraph, you use the property margin-bottom.
<p style="margin-bottom: 1.5em;">This is my paragraph.
And that’s all there is to it. Now you should be able to control:
- Line Spacing
- Paragraph Width
- Paragraph Spacing
- Header Sizes
The best part is you don’t need access to a stylesheet or the CMS your work is being published to.
If you do have access to your stylesheets, you should take a look at the free CSS file I created.
Just copy and paste the file and the typography of your blog posts and articles will be optimized with hardly any work.
Formatting Blogs with Inline CSS
You can also download my free inline template that implements the formatting discussed in this article. Just keep in mind that there are some more advanced tags and properties used in the template.
I’ll discuss those more advanced tags and properties–such as asides, pullquotes, and image sizing properties–in a future post.
Make sure you don’t miss out by signing up to my newsletter.
Additional Resources
On ems vs. pixels and more: CSS Font-Size
For more on CSS properties, visit: W3 Schools