CSS: Drop Caps

css-dropcapsDrop caps is a very old technique of styling first letter of the paragraph or article, commonly used by News Papers, Magazines etc. With CSS we can achieve this requirement. Let’s have a look on the following example.

The pesudo-element :first-letter will do our job. This CSS selector can only be used with block level elements.

    p:first-letter {
        font-size: 400%;
<div style="width: 40%;">
       MVC framework will really helps you to develop the project rapidly, if you know one framework well then you’ll never worry about the project deadline. You will write less code, which means less time spent typing. You will not have to chase down 3rd party libraries all the time for every new project because most of them will come with the default framework install.

You can apply other CSS styling too like background-color,, color, border etc to make it more beautiful.

Hopefully, this short little tip will be helpful.
Thanks !

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s