Change font style of the first letter of post title

Really quick tutorial from me today that was requested a couple of times on how to change the first letter of your post title and post text on Blogger to be a different style giving a magazine effect like this sentence.

I’ve seen this technique used in some cool and creative ways. You could combine it with this tutorial on adding a custom font to Blogger or WordPress and add a custom font for the first letter.

Change the font style of the first letter of post title

Go to Template > Edit HTML and search for </b:skin>. Paste one of the following codes above it

h3.post-title:first-letter { }

.post-title.entry-title:first-letter { }

h3.post-title a:first-letter { }

Add the CSS

Now you can customise the first letter by adding CSS in between the brackets. Here’s a list of some of the things you can change.

Change font – font-family: 'FONTNAME';
Change font size – font-size: #px;
Underline the letter – text-decoration: underline;
Add line over letter – text-decoration: overline;
Add line/strike through – text-decoration: line-through;
Change font to uppercase – text-transform:uppercase;
Change font to lowercase – text-transform:lowercase;
Change font colour – color: #HEXVALUE;
Change font background colour – background: #HEXVALUE;

Example of it in use

Here is an example, notice the H is different.

h3.post-title: first-letter { font-family: 'Cookie', cursive;; font-size: 12px; text-transform:uppercase; color: #ec008c; }

Change font style of the first letter of post text

Go to Template > Edit HTML and search for </b:skin>. Paste the following code above it.

.post-body:first-letter { }

Then just like above add the css between the brackets to change the first letter of the body text in each blog post.

10 Comments

Hey Ellie, great post! The code for post title works but I want it in the post body, like you did and that code isn’t working for me, am I doing anything wrong?

Hello, I can’t see the code in your CSS to check that everything is right. It should alter the B in “Book Title” in your latest post but may it has something to do with your custom template. Add this code to test it .post-body:first-letter { font-size: 22px; color: #00cccc; }

Still no luck..but I think it’s because of my custom template 🙁 Thanks for the help anyways..I think I’ll have it once I change my design 🙂

Hi, I can see the “B” as being different. See the screenshots here & here.

Oh, I think it doesn’t show up in Firefox for some reason, I could see it too once I loaded the page on Chrome..Thanks a ton for helping me out 😀

Your amazing I love your tips!

Hey!
Thank you SO MUCH for the amazing posts. I have been learning so much and I am LOVING what I’m doing to my OWN blog!
I was wondering, can you change the style of the first letter of a word in the post body.
Like, I don’t want to change the styling of the first few lines in my posts, but , the first letter of the fifth line, I want to have a different styling.
Can we do the same thing you did in CSS, in the individual HTML editing of the post?
Thanks again!

Hello. Add .special {} to your CSS and add the styling you want to between the brackets. Then you can wrap the word or letter in the following <span class="special"> TEXT YOU WANT DIFFERENT HERE </span> and it will adapt that styling.

Can this be done for only the posts and not the ‘Pages’ section? It works for the posts on the homepage but also for the wordings in the ‘Pages’ section.

Hello Areli, it can be used for pages also. You can use .post-body:first-letter to target the first letter of all body content, and use conditional statements to only target pages. Hope this helps!