Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Use CSS to create a drop cap

Drop Cap

Adopt the popular print technique and add a drop cap to your text

A DROP CAP is a popular technique used in print to start a sentence, and it is an effect that can work well in web text. To add the drop cap effect in an HTML page, the first step is to add the first paragraph or body of text where the drop cap is to be applied. Now go to the Modify menu and select Page Properties>Appearance. Select a default font – a good choice would be Georgia – followed by the desired size. Pixels can be used to give more flexibility to the text using the ems option, make the Size one ems and choose a default colour. Now head to the Text menu and select CSS Styles>New to create a new class. From the New CSS Rule window, select Class, give it a name and Define in This document only and press OK. Now select the desired font for the drop cap. Ideally, this should be the same font as the body text, but it can be any font you want. Now make the size three ems. This means that the drop cap will be three times the size of the body text. Add one ems to Line height, and adjust to position the drop cap. Now switch to Box and select Left from Float and add 0.2 ems to Margin and Right.

×