How to Add Drop Cap in Web Pages

Posted in: Web Design,Website & Blog |

This post is also available in: Indonesian

dropcap

This post is also available in: Indonesian

When we read books or articles in magazines, at the beginning or each chapter usually begins with the first letter in which have differently made typography from other letters. The first letter in the first paragraph can be a capital letter with a very large font size, style and different font type, which obviously looks interesting. This is called Drop Cap. In word processing applications like Microsoft Word, we simply insert a drop cap in our document just by pushing a button/menu. To make one on a web page, we can do so by using CSS.

Here is an example of a paragraph with a drop cap.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

and CSS used in the paragraph above as follows

p:first-letter {
float: left;
padding: 0 3px 0;
font-size: 50px;
font-style: italic;
font-family:georgia,"Times New Roman";
}

by using the CSS pseudo-selector :first-letter, then we can make drop cap effect on web pages.

Selector p:first-letter will be applied to all p (paragraph) tags, if you want the style is applied only to the first letter in the first paragraph, add the pseudo-selector :first-of-type in which it is actually the same as :nth-of-type(1).

So here is the complete CSS snippet.

p:first-of-type:first-letter {
float: left;
padding: 0 3px 0;
font-size: 50px;
font-style: italic;
font-family:georgia,"Times New Roman";
}

By trying and mix-matching between the style, size,  font type, add borders, etc. your drop cap can be looks more attractive.




Speak Up!

Leave your own comment

Notify me of follow-up comments via e-mail (or subscribe here).




 

Share

Subscribe Feed

Email

Facebook

Twitter

Delicious

Digg

StumbleUpon

Google Buzz

Deviantart