How To add Drop Cap Letter in Html and Css

The quality of a blog post depends upon both the content and presentation of the post. To make a blog post more attractive, a properattractive image is a must thing. However adding a big size letter at the beginning of each post have became one of the best practice in making the blog post even more attractive. A drop cap is nothing but adding a character which occupies the size of 2-3 lines and stand strong in the paragraph. You can notice that, each blog post of this blog have a big letter at the beginning and this is how it looks like. So today i am going to teach you on how to add this drop cap at the beginning of each of your blog posts.

Add Drop Cap Letter in Html and Css [includes Blogger]

1. Go to blogger dashboard --> Template --> Edit Html (Expand widget templateoption).

Drop Cap Letter Css style

2. Find for ]]></b:skin> and place the following peace of code just above it.

/*dropcap by bloggertricks.biz*/
.post large{
float:left;
color: $headerBgColor;
font-size:60px;
line-height:50px;
padding-top:1px;
padding-right:5px;
}
/*----*/

Note:-
You can customize the appearance of the drop cap letter by editing the above style code. You can set a color of the letter, adjust padding, adjust its line height !important, font size,etc.

3. Save the Template.

Html implementation

4. Open the post editor of any blog post.

5. Go to Html mode of blog post.

6. Enclose the desired letter with large tags as shown below.

7. Publish the blog post and you can notice the drop cap effect of the letter which is enclosed within large tags.

Conclusion

Adding a drop cap at the beginning of each blog post is a good practice but avoid using it inside blog posts or at the beginning of each paragraphs in the blog post as it may irritate the visitor of your blog. Hope this tutorial was worth to you Pals. .Peace and blessings pls..