Have you noticed the styles of most magazines and some books? The first letter of each article is typically exaggerated in size. The rest of the paragraph wraps around the overly-sized capital letter as if it is a picture or graphic. This style is primarily for aesthetic purposes. However, it is also intended to give emphasis to the start of the article. This style is called drop caps.
You can actually imitate this style in your web articles such as blogs, provided that you have access to the template style sheet of your blogsite. When it comes to flexibility in style, Blogger is the best free blog host. Other blog hosts do not allow access to the template style sheet.
To display the drop caps effect, you must first open the HTML-CSS template of your blogsite. Then, insert the codes listed below into the style sheet of your template. The style sheet is the collection of CSS codes found between the <head> and </head>tags of your template.
As you can see, the first letters of my posts are all displayed as drop caps. These do not involve the mere resizing of the texts in the blog post template. Drop caps involve the modification of the style sheet. Below are the codes that I have used.
.dropcaps
{
float:left;
color: $#C68E17;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}
After inserting the above codes in the style sheet of your template, save the template and view your blog. You will notice that no change has occured. This is because you still need to enclose each first letter of your posts inside these codes: <span class="dropcaps"> and </span>.
After enclosing the first letter of your post save your blog and view the result. You always have to enclose the first letter of your post to display the drop caps effect.
I still do not know how to automate this style (if it can really be automated at all). If someone reading this post knows the solution to this, please post a comment. I will be trully grateful for the information.
