Style Sub-Headings In Your Blogger's Post Using CSS

You have seen in many other blogs that there sub-headings are shown with a little bit of style like top and bottom borders or any other. It's a nice way to style your sub-heading so that it looks beautiful and eye catching. Readers find it easy to locate a certain section of your post and it will save the time of your reader.

In this post, I will show you how you can style your sub-headings using CSS.

Style Sub-Headings In Your Blog Using CSS

1. Open your blogger dashboard. Now go to 'Template' and click 'Edit HTML'.

2. Click anywhere inside the code box. Now using the keys Control+F, open the search box. Write 

]]></b:skin> inside it and hit enter to find it.

3. Now copy and paste one of the following given codes just above it.

To show only a bottom border

.post h3{ 
color:#0080ff; 
border-bottom:1px solid #289728; 
font-size: 12pt; 
padding:2px; 
}

To show both top and bottom border

.post h3{ 
color:#0080ff; 
border-top:1px solid #289728; 
border-bottom:1px solid #289728; 
font-size: 12pt; 
padding:3px; 
}

To show border from all sides 

.post h3{ 
color:#0080ff; 
border:1px solid #289728; 
font-size: 12pt; 
padding:2px; 
}

If you want dotted border insteas of solid, then replace solid with dotted.

4. Save the template and you are done.

How To Use It On Your Blog?

To use it, select Sub-Heading as show below

or Write your Sub-Heading as 

<h3>Your Sub-Heading Here</h3>