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.
Example:

CSS
<style>
    p:first-letter {
        font-size: 400%;
        float:left;
    }
</style>
HTML
<div style="width: 40%;">
    <p>
       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.
    </p>
 </div>
RESULT

blog1
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 !

Advertisements