How to Style Headings H1-H2-H3 in Blogger using CSS

You might be using headings in your blogger post to enrich it with a top class SEO, embedding useful keywords and then tagging it to H2 to give priority to that heading, but you might have seen many blogs and you might have wondered how they are using such a nice styling for their headings, well that actually done using CSS and we are going to teach you how it can applied to your blogs headings.

Also: Useful and Important SEO Optimization Tips for Blogger

So for the demo you can see below image on how I have designed my heading tag, by giving a blue border to the left and black border to top and bottom of that heading, you can a lot more then this.

Design your Sub Headings using CSS in Blogger

Now if you are planning to design your headings its very important that you know basics of CSS so that you can sure what you are doing, you can use our CSS Editor if order to view your progress.

1. Open Blogger > Template >Edit HTML.
2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

   .post h3{color:#666;border-top:1px dotted #666;border-bottom:1px dotted #666;font-size:18px;padding-top:2px;padding-bottom:2px}.post h3:hover{border-top:1px dotted #0080ff;border-bottom:1px dotted #0080ff;background-color:#289728;color:#666;padding-top:2px;padding-bottom:2px}

3. So now this is just a basic code, you can replace the h3 tag above with h1 or h2 or h4 anything, its not any issue.
4. You can see above I have also used a .post h3:hover CSS code, well you can even use this to do a lot cool stuff like changing headings border color when someone hovers over it or it increasing the padding.

So you get the idea how this thing works, make sure to check some CSS basics on this blog or even searching on google, after you get a good hand in CSS you will be bale to make a good amount of customizations to your blog.