Drop caps : large capital letter like magazine with CSS

You must have seen the large first letter of the beginning of the print text media. This is known as drop caps. Here is an example of drop caps:

(Image courtesy of the drop caps above: Corel official website)

Easy method to create Drop caps effect in WordPress

There are many CSS methods to create drop caps. We will use a cheat to use drop caps where ever you want, in any post. Yes, this method of drop caps should work on Blogger too.

The code is:

<span style=”float:left; Margin: 5px;font-size: 40px; font-weight: bold;”>T</span>he classical tradition was late to use capital letters for initials at all; in surviving Roman texts it often is difficult even to separate the words as spacing was not used either. This might become drop caps later. In the Late Antique period both came into in common use in Italy, the initials usually were set in the left margin (as in the second example below), as though to cut them off from the rest of the text, and about twice as tall as the other letters. This became drop caps later.

(Text courtesy : Wikipedia text on drop caps)

Result:

The classical tradition was late to use capital letters for initials at all; in surviving Roman texts it often is difficult even to separate the words as spacing was not used either. This might become drop caps later. In the Late Antique period both came into in common use in Italy, the initials usually were set in the left margin (as in the second example below), as though to cut them off from the rest of the text, and about twice as tall as the other letters. This became drop caps later.

More tips:

Along with the style of drop caps, you can use these advanced CSS text effects to enhance the effect more.

Incoming search terms:

Visitors Read This Post Also Read:

1. Tips and tricks to start and continue a professional and successful blog In this article we will give you some tips for a having a successful  and...
2. 30 ways to increase the readability of your blog One of the most important aspect in the design of a blog is readability, how...
3. How to create the SEO optimized structure of your website? It is a question that is often asked and searched in the Google and rightly...
4. 50 Google SEO tips to get more visitors We wrote many articles on SEO, here are top 50 SEO tips to get your...
5. Editing Blogger’s theme template to have some features like WordPress Many bloggers using Google Bloggers want a custom theme that is SEO optimized. We thought...
6. Create mouse hover effect for button using CSS sprite You must have noticed buttons in various websites that change its appearance on mouse hover....
7. Simple SEO tips reloaded Why the name of the article is simple SEO tips reloaded? We published various SEO...
8. Dew drop on purple flower petal wallpaper for PC and Mac Dew drop on purple flower petal wallpaper is not the original name given by Jules1983; the...
9. Simple tricks to enhance your password’s strength Do you know that it is possible to insert a space in your username and...
10. 7 basic and essential SEO tips to optimize your blog This are basics of SEO. You must tweak these points rightly in order to get...
11. Possible reasons for drastic drop in traffic from Google search Previously, we wrote one article the steps to diagnose decrease in visitor count; which eventually helped...
12. How to optimize your website to reduce the bounce rate? The bounce rate is a key metric to watch and change the strategy of web...
13. How to install WordPress on Windows 7 to test themes and plugins offline Testing a new theme or plugin for developing them or just for normal usage in...
14. Customize blockquote using CSS and graphics in WordPress Blockquote should reflect the personality of the blog site writer. It looks nice when it...
15. Some known causes of Google’s penalty It might happen your website or blog suddenly started drastically losing traffic and within few...