How to Change Post Body Font Size, Color & Style

You can customize post body font in any expect like color, size, style or family. First, you should know what is the default CSS code for post body and then we'll customize it according to our own taste. Go to Layout | Edit HTML and find this code:

The default code of posts!


.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Understand the default code!


1- margin:.5em 0 1.5em; is defining spacing between post and other elements in the blog like sidebar and header.

2- border-bottom:1px dotted $bordercolor; it very descriptive. It creates a dotted border at the bottom of the post with width 1px.

3- padding-bottom:1.5em; causes some space between posts and other elements at the bottom. The other elements could be labels, comments or date.

Make changes in the default code!


Now, I've given you some idea about the post body style definitions. By default, the font properties are not defined specifically for posts but we can easily do this by applying some simple CSS techniques.

1- How to change font size in post body!

You need to add font-size:15px; property in the default CSS code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-size:15px;
}

Tip: Try increasing or decreasing 15px to increase or decrease font size.

2- How to change font color in post body!

You need to add color:#FFFFFF; in the default definitions:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
color:#FFFFFF;
}

Tip: #FFFFFF is the hex code for white color, you can capture any color you see on your computer or on web and get the hex code of that color through a free utility ColorPic.

Remember: This property will not effect hyperlinks (?) in the post body, I'll tell you about hyperlinks customization later in this article.

3- How to change the font family in post body!

Font family means that you can control which font will be used to display post body. You can have Arial, Times New Roman, Georgia, Serif and many many more. So, you'll need to apply font-family:"Times New Roman",Georgia,Serif; property for this purpose.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-family:"Times New Roman",Georgia,Serif;
}

Tip: I've added 3 fonts in font-family:"Times New Roman",Georgia,Serif; property, why? Because my user might not have Times New Roman installed on his/her computer then the second font Georgia will be used and similarly Serif can also be used.

Tip: See following article about CSS font family properties for information.

http://www.w3schools.com/css/pr_font_font-family.asp

4- How to change the style of post body font!

Remember: You might not need this property but this is useful for better understanding of your fonts.

By style, I mean you can make your font italic through font-style:italic; property.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-style:italic;
}

Remember: If you'll not add this property in default definitions then your post body font will be displayed normal.

Tip: Blogger post editor provides an easy way to make specific part of text italic. When creating a post, select your text and click the i icon which is the second icon on toolbar.

How to apply these properties on hyperlinks in the post body!


Some of the above described properties will not effect hyperlinks (?) in the post body and there are no definitions in default Blogger CSS for hyperlinks (?) so lets add our own definitions.

This is the deafault code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Add some more juice in it:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}

Now, I'll explain all 3 properties added in .post a {} tag.

1- color:#FF0000; is the hex code for red color, you can hex code of some other color to change it.

2- text-decoration:underline; will make your post hyperlinks (?) underlined, you can change this to text-decoration:none; if you don't want to apply it.

3- text-transform:uppercase; will change your hyperlinks (?) to transform to uppercase. You can change it to text-transform:lowercase; if you want your hyperlinks to display in lowercase or you can change it to text-transform:none; to nullify this effect.

How to customize the hyperlinks for mouse over event (hover effect)!


You can also further customize the font appearance when mouse comes over your hyperlinks. For example you might want to change the color of your hyperlinks on mouse over or make it underlined or maybe change the font size.

This is our default CSS + hyperlinks CSS we added in the previous steps:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}

Add even more juice in it:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}

.post a:hover {
color:#0000FF;
text-decoration:none;
text-transform:lowercase;
}

Now, I'll explain some changes I've made.

Note: All the properties in .post a:hover {} will be visible only when you'll move mouse over the link.

1- The color will change to blue (#0000FF).

2- There will be no decoration of text. Previously, we applied text-decoration:underline; property to make our hyperlinks underlined but when mouse will come over, it will not be underlined.

3- On mouse over, our hyperlinks will become lowercase.

Tip: "On mouse over" is called "hover effect" in CSS references.

Before you leave!


I've tried my best to share my knowledge with you, if this article has really helped you then you can comment or tell other people about it through social networking. Any question, comment or suggestion will be greatly appreciated, thanks.

76 comments:

  1. Very nice explanation about css. Any new blogger can be benefited from your post.

    ReplyDelete
  2. Hello Bilal,
    Can you tell me how to do if I want the readers to see another text when the mouse move over the link?

    ReplyDelete
  3. @ iskander, you can't do it by normal CSS, so there might be a javascript out there which can help you to achieve this.
    By the way, if you any other website with this feature, please gimme the address, I'll have a look and try to help you!

    ReplyDelete
  4. Can the dotted border be changed to a line?

    ReplyDelete
  5. @ Mark, yes you can do this. For example, here is the code for dotted border:

    border-bottom:1px dotted #333;

    Just replace "dotted" with "solid" like this:

    border-bottom:1px solid #333;

    Now, you'll have a solid line of width 1px and color #333 (black).

    ReplyDelete
  6. Great stuff!
    I have issues with the spacing below picture, and I read that I had to change the "Padding-bottom"
    what is exactly the 1.5em value?
    Thanks

    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }

    ReplyDelete
  7. @ Me, "padding-bottom" value is defining distance between 2 posts, if you'll increase the "1.5em" to some higher value like "2em" then the next post will appear after some more distance.

    ReplyDelete
  8. So helpful for me when I want to make a few quick changes without learning HTML CSS or whatever- Thanks so much!

    ReplyDelete
  9. superb and easy explanation,thanks a lot

    ReplyDelete
  10. thank you very much for your explanations !

    ReplyDelete
  11. Hi i want to know how to change the post body color not the font please

    ReplyDelete
  12. Hi aldrix,

    Do you want to change the font color in post body?

    ReplyDelete
  13. Hi, How can you add a margin so the text is not hard against the edge of the post boarder? It is noticeable because I have a different colour background to the post background. Thanks

    ReplyDelete
  14. @ Annies Marlborough Ltd, I've just checked your blog and your post background and blog background are same so what's the real deal?

    ReplyDelete
  15. Hi, I wanted to have white as post back ground and the light tan as the blog back ground. When I tried I got a white box that was hard against the text - the width of the post - and it look awful. I want to try and get a margin setting so the words are away from the post edge. An ideas?

    Cheers

    ReplyDelete
  16. Hi,
    I'm trying to change my post background's colour, but I just can't do it! In the html code, there is a part in the post-body blockquote that says background: #transparent, and I thought it might be it, but seems like it isn't.

    Could you please help me?
    Thank you very much!

    ReplyDelete
  17. @ Annies Marlborough Ltd, yeah that can be done through a little 'padding'. Just gimme your blog address so that I can help you out!

    ReplyDelete
  18. @ Juliana., gimme your blog address please!

    ReplyDelete
  19. Hi again!

    My blog address is valhamepotassio.blogspot.com

    Thanks =]

    ReplyDelete
  20. @ Juliana, the background of your posts is actually an image:

    http://4.bp.blogspot.com/_hcF8ssiWKd4/SgUqwSVjlYI/AAAAAAAAAqE/XrXtOc1t750/s1600/tiredgirlbd.jpg

    Don't worry I can easily edit that image and then you can replace the current image with a new one. Just tell me which color you want to apply as post background!

    ReplyDelete
  21. Hi Bilal

    My Blog address is anniesnz.blogspot.com

    Thanks for the help

    ReplyDelete
  22. @ Annies Marlborough Ltd, go to Edit HTML and find the following code:

    #main-wrapper {
    width: 410px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    Then simply replace the above code with the following:

    #main-wrapper {
    width: 410px;
    float: $startSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    background: #fff;
    }

    .main { padding: 0 10px; }

    Click Preview button to see the changes. Now, you posts background will be white and the padding property will make sure that everything in posts has a little margin with the walls.

    ReplyDelete
  23. You are really helpful. God bless you!

    ReplyDelete
  24. Many thanks Bilal. This works well.

    ReplyDelete
  25. thank you very much for all the info!! I really needed the tip on how to change the dots with lines! Thank you again!

    ReplyDelete
  26. thanks alote it was very helpful

    ReplyDelete
  27. Thanks!!! I did change the font of my blog!!! Jeanette

    ReplyDelete
  28. i try to follow the steps but it doesnt work. how?

    ReplyDelete
  29. @ farawa khairuddin, which template are you using? Gimme your blog address!

    ReplyDelete
  30. Hi! I'm having problems changing the font size of my posts.. When I increase it, the line spacing increases rather than the font size itself.

    Also, how can I narrow the gap between the date and the post title?

    freeperiods.blogspot.com
    thank you!!

    ReplyDelete
  31. Thank you so much - this help me a lot. Finally!

    ReplyDelete
  32. Hi, i am unable to change the font size of my post body. It's the correct size but when i align it center via the button when creating a post in blogger and publish it, the fonts are automatically smaller than it's original! How do i change this?

    Thanks

    ReplyDelete
    Replies
    1. Hi CF!, you're using a custom Blogger template which would need manual editing.

      Delete
    2. Thank you for your reply!

      i have tried to manually edit this and the font size is correct but when i align my post to the center while i'm typing a post, it somehow overrides my templates code and turns out smaller! the most recent post is an example!

      do you have any idea how to override this?

      thanks!

      Delete
    3. Hi CF!, please email me your template file, I'll check it:

      levisinside0@gmail.com

      Delete
  33. Hello ,
    I am having problems with my customised blogger template , I wanted the post to displat video , but whatever i post it simply shows some text and automatically puts read more button and hides everything , videos , images and stuff. how to have a proper normal post. another thing, i do not see a Jump break in my post editor.please help

    ReplyDelete
    Replies
    1. Hi Sahil, heavily customized templates are difficult to edit and maintain. I suggest you to switch to one of the default Blogger templates.

      Delete
  34. Hi there Bilal,

    I really need your assistance.i already changed few of my blog font except for only the post.. i seem cannot find codes as u mentioned above.Please be informed that i got the blog template from blogskins.please assist

    http://pantieandboxer.blogspot.com

    :) thnks

    ReplyDelete
    Replies
    1. Hi ily gaga, you are using a very old and heavily customized template. It is very difficult to make changes in it. Kindly switch to new Blogger templates. They can be easily customized.

      Delete
  35. This was very helpful. Thank you!

    ReplyDelete
    Replies
    1. Hi Hope Lattin, please link back to this blog. I'll really appreciate it :)

      Delete
  36. please give me full post style code for my blog.

    ReplyDelete
    Replies
    1. Hi pawneshwer, what do you mean? I can't understand :(

      Delete
  37. Thanks for this explanation. I'm working with a tumblr theme and I still cannot change the font size of the posts. I can change the font size for every other aspect however.
    Here is the code
    http://pastebin.com/mhnHL2qs
    Any suggestions?
    When I change the font size and line height in line 96 and 98 under {body} I just end up with a larger space beneath the header...

    ReplyDelete
    Replies
    1. Hi Vincent, what the address where your template is located?

      Delete
  38. You're the best! Thank you so much! I've been going crazy trying to change the text size in my post body. Thank you, thank you, thank you. :)

    ReplyDelete
    Replies
    1. Hi Hellen, thanks for commenting :)

      Delete
  39. Hi! I tried to change the font size using the code on my blog www.hahaheart.blogspot.com, I don't know if I did it correctly, because nothing seemed to have changed.

    These are the codes that I found (on Templates > Edit HTML) and modified (I added the font size: 15px)

    First, this:
    .main-inner .widget .post-body ul {
    padding: 0 2.5em;
    margin: .5em 0;
    font-size:15px

    list-style: disc;
    }

    Second, this one:

    .post-body {
    line-height: 1.4;
    font-size: 15px
    }

    Nothing seemed to change. My post body font style is Crimson Text, with original post body font size set at 14px, but it looked like it's 9px.

    Also when I tried to change the Body Text font size through Template > Customize > Advanced, the only thing that changes font size is the blog description and the Popular Posts titles and excerpts.

    ReplyDelete
    Replies
    1. Hi Maya, email me your template file.

      levisinside0@gmail.com

      Delete
  40. I am utterly desperate. I've been trying to find that code for almost 5 hours straight but I can't clearly locate it. I want to change all the default fonts but I don't know how. I'm a newbie in this and I don't have any idea how to read (and understand) HTML code. Are there any easier ways to overhaul my blog? I am verily desperate. I terribly need help at this. My blog is www.writingatitsfinest.com

    ReplyDelete
    Replies
    1. Hi Denmark, email me your template file:

      levisinside0@gmail.com

      Delete
  41. Hi Bilal,
    Thanks for the excellent description.
    However, I am still unable to increase the base font size for my blog, which uses an (unmodified) blogger Dynamic Template:http://www.howigotmykink.com/

    Any ideas?

    Thanks.

    m

    ReplyDelete
    Replies
    1. Hi Maurice, Dynamic templates are a little hard to customize. I can fix your problem for $11.

      levisinside0@gmail.com

      Delete
  42. Thank you so much!!!! This is so useful~ Couldn't find other materials like yours^^

    ReplyDelete
  43. hey i m newbie in blogging.i want ti enlarge font size of my post but i tried 3 . i cant do it ??? wat 2 do .
    on home page its large .but when i open perticuler post its remain same ???
    can u guide me plz .

    ReplyDelete
  44. Hi, Can you add how to do this to newly added "dynamic" templates?

    ReplyDelete
    Replies
    1. Hi Adarsh, I'm afraid I won't be able to do that in near future as I have a lot of work load :(

      Regards,
      Bilal

      Delete
  45. sorry for the trouble....but how to use these codes like if i have to post "click here if u wanna download??"
    ps: am a noob.

    ReplyDelete
    Replies
    1. Hello AJBOSS, I think you are talking about a link. Well, just type what you want, select it and click the chain icon in post editor tools which will help you in creating a link.

      Regards,
      Bilal

      Delete
  46. Amazing post. Perfect. Thanks bro. Keep it up.

    ReplyDelete
  47. Hi its very useful. it works.. happy to read your post..=)

    ReplyDelete
  48. This made all of my CSS dissappear...

    ReplyDelete
  49. Hi this was such a helpful post but I need help, I can't find the first line of code you mentioned anywhere in the html part

    ReplyDelete
  50. okay don't bother I got in right after i sent that comment x.x thanks for the post tho!

    ReplyDelete
  51. I want to change the whole text content's font style and size of my blog... LIke I write the articles, content of my article style and size has to be same... thanks in advance... http://sanjeevsarticulation.blogspot.in/ Its my blog

    ReplyDelete
    Replies
    1. Hi Sanjeev,

      You can contact me on email for custom service:

      levisinside0@gmail.com


      Regards,
      Bilal

      Delete
  52. Hello! This has been very helpful! I have a question. I would like to change the body of my blog. I have a chevron background and would like to add a border to the white body of the blog. How would I do that?
    http://chevronandcenters.blogspot.com/
    Thanks!!

    ReplyDelete
    Replies
    1. Hi,

      If you need to add a border, please email me your requirements:

      levisinside0@gmail.com

      I charge nominal fee for such changes.


      Regards,
      Bilal

      Delete

Note: All comments will be moderated.