typography image - Content Writer's Guide to Formatting Blogs with Inline CSS

Content Writer’s Guide to Formatting Blogs with Inline CSS

In Writing by Chris Meyer

typography image-formatting blogs with inline cssCopying 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:

HTML Elements

    • Headers
    • Divs
    • Paragraphs

 

CSS Properties

  • 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 &nbsp;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:

  1. Line Spacing
  2. Paragraph Width
  3. Paragraph Spacing
  4. 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