Giving Your Posts Mad Style by Spicing Up the First Paragraph

Giving Your Posts Mad Style by Spicing Up the First Paragraph

Giving the first paragraph in a story a distinctive style is something that slick, expensive magazines have done for years.

It not only brings extra attention to your opening, helping to draw readers down into the article, it can also liven up the page aesthetically.

One other thing it does is help reset the reader’s attention when they move off that first paragraph into the second. (Btw, studies have shown that resetting a reader’s attention is quite desirable, as readers often get bored and lose focus easily.)

But no longer is this little trick only for big-money media companies. You can easily do it yourself, even if you’re all by your lonesome with only one blog post to your name.

featured2

What We’re After

Before we get into how to do this, we’ll take a quick look at what we’re after.

I decided to give my first paragraph a different font, a slightly darker color, and a larger line height and larger text size.

This is but one example. As you’ll see below, you’ll be able to change yours as you like.

example-style

A Quick 2 Step Process

As we’re going to be changing your theme’s CSS file, of course I’d be remiss if I didn’t recommend using a child theme instead of altering your original file.

Essentially we’re just going to be adding a little bit of CSS to your style sheet. First, however, we have to make sure we get the right “class” for the CSS.

1. Find the Class Name for Your Content

First you’ll want to just highlight any word in a regular post. Then in Google Chrome or Firefox, right click and you should see an option to “Inspect element.” Choose that.

highlight-word

From the bottom of your browser, you should now see some info about that bit that you’ve selected. Somewhere near where the highlight first appears, usually just above it, you should see class=“something”.

In my case, my class is named entry.

inspect-element

Depending on your theme, it may be a little more complicated. You may see a number of different classes. And so you might have to play with them to see which one works for you. One of them eventually should, however.

2. Insert CSS

Once you have your class, then you can put some CSS like the following into your style sheet. (Appearance > Editor > Stylesheet – style.css)

You’ll see my code below starts with .entry because my class was named entry. Yours may be different.

.entry p:first-child {
 font-family:"Times New Roman", Georgia,Serif;
 color:fff;
 line-height:125%;
 font-size:170%;
 }

You can play around with the properties to get them the way you want them.

There are lots of other choices if you know some CSS. You can find more options at a place like W3Schools.

Issues with Images

You’ll notice above that I’ve started my post with an image. At times I found the presence of the image took the styling away. When I tried it at other times, I found that it didn’t.

It turns out that it depended on the where the first line of text was located in my code.

You’ll notice in the CSS code above, it says p:first-child. The “p” is for paragraph and “first-child” tells it to get the first paragraph.

If I put an image in my post and then put some space between that code and the beginning of my text (see below), then I had problems.

space

However, when I brought the text up against the image code (as below), I had no problems.

no-space

Adding a Drop Cap

Something else you can do to help jazz up your first paragraph is to add a drop cap – a large first letter.

Again, using the class you found above, you can put something similar to the code below into your CSS file, playing with it as you like.

.entry p:first-of-type:first-letter{
 float:left;
 margin-right:0.10em;
 line-height:125%;
 font-size:350%;
 }

And here’s how that turned out.

drop-cap

I ran into the same problem here with images that came before the first bit of text; however, I couldn’t seem to find a solution for this one.

Maybe someone with more CSS knowledge than I have can offer a solution in the comments. If not, then you may just have to live with no drop cap if you plan to put an image (or anything else) above the first paragraph of text.

If you don’t insert an image, however, it should work out for you.

Photo credit: walk on by