Simple Guide to Styling Post Paragraphs for Those with Limited Technical Skills

Part five of: “Stylizing Your Content”.

There are two files you will be working with:

1. index.php
2. style.css

You can find these in your WordPress admin under Presentation > Theme Editor - they’ll be listed on the right hand side.

First we need to find what our post paragraphs are called. Open up index.php and find the following code (the red is the important part, the rest may change slightly depending on the theme you’re using):

<?php the_content(’Read the rest of this entry »’); ?>

This is WordPress talk for “display the post here.”

Once you’ve found that code, we need to take a look at what is surrounding it. In the default WordPress theme it looks like this:

<div class=”entry”>
<?php the_content(’Read the rest of this entry »’); ?>
</div>

Now we know that the content (or post), is wrapped in a div called “entry” - keeping this in mind, we can now style the paragraphs within that div.

Close the index.php file and open up style.css.

Chances are your style.css file already has something that looks similar to this (if not, create it):

.entry p {
font-family: blah blah;
color: blah;
font-size: blah;
line-height: blah;
}

Font

You have two different styles to choose from (there are actually four, but if you write your posts in “monospace” or “fantasy” text you’ll cause peoples eyes to bleed):

1. Serif (used to be strictly for print as they were difficult to read online but now that problem is fading)
   • “Times New Roman”
   • Georgia
   • Garamond
2. Sans-serif (fonts without “serifs” which are the little hooks or protrusions on the ends of the letters)
   • Arial
   • Helvetica
   • Trebuchet
   • Verdana
   • “Lucida Sans”

Those are just some examples.

So let’s say for instance you choose Helvetica as your font. You’re also going to want to pick at least one alternative and include the group it belongs to, like so:

.entry p {
font-family: Helvetica, Arial, Sans-serif;
color: blah;
font-size: blah;
line-height: blah;
}

Color

Simple. Just choose the hex value for the color you want. If you don’t want me to ever read your blog, you can choose yellow like so:

.entry p {
font-family: blah blah;
color: #FFFF00;
font-size: blah;
line-height: blah;
}

Most of the time, you’re going to have your text on a white background so leaving the color black is a little hard on the eyes. Soften it up a bit by making it a dark grey.

Size

Most of us don’t wear 20x spectacles so keep your fonts above 10 pixels. Conversely, most of us aren’t blind so 32 pixels is a bit much. How about something like this:

.entry p {
font-family: blah blah;
color: blah;
font-size: 11px;
line-height: blah;
}

Line Height

This is the big one. Most people neglect this and it can make a huge difference in the readability of your blog. You can look at this post to see how a paragraph looks when the line-height is set to 100% (default). The spaces between the lines of text are virtually non-existent. Make it pretty by doing the following:

.entry p {
font-family: blah blah;
color: blah;
font-size: blah;
line-height: 160%;
}

In the words of Bert Monroy: “Hope you learned somethin’ from dis, and remember to play, it’s the best way to learn dis stuff.”

See you soon for part six.

Image credit: mezone.