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 { }

or

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

or

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

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; }

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.