Beautiful Subheadings for Blogger- CSS styles

Using heading and subheading are as important to search engine as to your viewers. While organizing your ideas and steps into different headings such as H1, H2, H3 and so on you can also customize their styling to catch your readers attention and make it unique with nice styling. I will show you how you can change the styling of either of the heading tags such as h1, h2 and h3 to with free customized css and images.

How to change Blogger h1 /h2 /h3 with CSS styles: 

For blogger, you have to add the CSS before </b:skin> tag. For all heading tag the structure for adding your css is following:

.post h1{ENTER_YOUR_CSS_HERE}

When writing in composer use the option where it says normal to use h2, h3 and so on. On the html mode you can use the following codes:

<h1>ENTER_YOUR_TEXT_HERE</h1>

Here are some of the styles you can use. Add them before </b:skin> while editing your template. Change h2 to whatever heading you want the style to use it for. For size, add font-size: 14px; and change the number value for bigger or smaller text. Also feel free to customize and change the color and properties as you wish. See the preview on the blog before the styles.

Heading style 1, a very commonly used style

.post h2{
color:#0080ff;
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
padding:3px;}

Heading style 2, CSS3 readius

.post h2{
text-align: center;font-weight:bold;border:solid 5px #999c3b;
font-size:14px;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;padding:3px}

Heading style 3, all round edge

.post h2{
text-align: center;font-weight:bold;border:solid 5px #0fc7ff;font-size:14px;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;}

Heading style 3, with weird shadow

.post h1{
line-height: 1em; color: #91b9ff; font-weight:bold; font-size: 17px; text-shadow:0px 0px 0 rgb(-365,-325,-255), 0px -1px 0 rgb(-620,-580,-510),0px -2px 1px rgba(0,0,0,1),0px -2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);}