Change default styles of heading in Blogger template

This has been a minor disturbance for users using default templates from blogger or also on some premium or free third party templates. Blogger have some very odd styles for headings like <h1><h2>...<h6>. This post shows you an easy and effective way to make it as the way you want.

Heading tags are normally supposed to be larger font than the body content but in blogger it's not everything well with the heading tags, many of the heading tags are uppercase and others are even smaller than the text in the body, and that's not what we actually want.

You see the examples on blogs using Simple template and more other templates available for your blog by Blogge. The template i made this template from was 'Simple template' but you won't see the headings that looks odd or smaller than the body text, because it's not a rocket science to do such things on the web.

Fixing the sizes and styles

Sizes is one thing and styles are another. If you don't like it then don't keep it, it's your blog and you have the full control on it and so you can change it easily. All just you need is guides that can guide you through this. Before we change it you must understand how it's made like that, CSS. New to CSS ? No worry, you need basic knowledge of copy-pasting and you will get links to learn more about it. The CSS below can help you out of this weird problem of template.

h1 {
font-size:18px;
text-transform:normal;
}

1. Study each and every property, value and try to learn what does it mean. Simply seeing the h1 at the selector place tells that the stuffs between the curly brackets are going to be applied on an <h1> tag. You change the selectors as you desire. Don't worry, you can put different CSS for your different heading tags e.g : <h1> <h2> <h3> <h4> etc.

2. Next is the styles between the brackets, CSS is so easy to understand that you can start customizing your website with a little bit of knowledge about CSS. Here you can see the first property is font-size, i am sure you know what to do there, changing the 18px value will do the job. Make sure you give appropriate value so it looks better.

3. The most common reason people wants to however fix it is that some heading tags are all in uppercase by default, and no matter how did you format the text into the post editor, when it's published, it becomes what you don't even expect. The different values into text-transform property can be uppercase | lowercase | capitalize | normal | initial
If you are interested in knowing more about this property then you can do it here [click link]

Tip : Sometimes adding CSS doesn't override the existing styles on an element, so we need to use !important at the end of value before the semi-colon to force it be applied on it. For example :

h1 {
font-size:18px !important;
text-transform:normal !important;
}

Adding CSS

When you have your CSS ready then it's time for you to add that CSS to make it take effect on your blog and the heading tags. For a quick guide check this tutorial about adding CSS into Blogger.  

Need further help ? We are always ready with proper answers of your questions, if you don't understand something from this post then feel free to comment and if you are helped then comment can be useful to say thanks !